проект vue-cli + es6 + axios наступает на яму

сервер Командная строка Vue.js axios

Недавно я начал новый проект, потому что он совершенно новый, я могу отложить в сторону исторические проблемы и снова попробовать новые идеи и решения. Он также усердно работал в течение двух месяцев, чтобы разместить первую версию проекта в Интернете. Эта версия в основном предназначена для обеспечения отсутствия проблем с функциональным процессом, а следующая версия оптимизирует процесс разработки, производительность, мониторинг ошибок и другие вопросы. Некоторые из проблем, зарегистрированных до сих пор, будут решены в первую очередь.

В качестве названия проект принимаетvue-cli + es6 + axiosЭти трое все еще работают на мобильном терминале, учитывая совместимость.安卓4.1 & ios7.1, Jq был введен в начале, а позже обнаружил, что он совершенно не нужен, поэтому была введена ajax-библиотека axios, а затем и другие приняли нативнуюJavaScriptа такжеES6Серьезных проблем при разработке не возникало.

Axios

адрес гитхаба:github.com/axios/axios

JQ, которые я использовал до этого$.ajax, после внедрения аксиосов еще есть какие-то разные ямы, к которым нужно привыкнуть.

  • Несогласованные параметры запроса

    аксиос,getзапрос иpostЗапросы несут параметры по-разному, а именно:

        axios.get(url, {
            params: {
                id: 123456
            }
        }).then(res => {})
    axios.post(url, {
            id: 123456
        }).then(res => {})

    Решение состоит в том, чтобы просто запечатать один на основе axiosfetch.js, чтобы упростить и унифицировать вызовы

  • Возвращаемое значение больше информации

    В функции обратного вызова jq данные, возвращаемые нашим бэкендом, непосредственно помещаются в параметры, и мы можем напрямую использовать res.В axios параметры функции обратного вызова содержат больше информации:

    • status:код состояния запроса
    • statusText:описание статуса запроса
    • headers:Информация, связанная с заголовком ответа
    • config:Запрос связанной конфигурации
    • request:Информация о текущем запросе
    • data:Данные, возвращаемые серверной частью То есть в функции обратного вызова axios, res.data и$.ajaxРазрешение функции обратного вызова постоянно, и в большинстве случаев нам нужно знать толькоres.dataИ игнорируя дополнительную информацию, этот момент вfetch.jsтакже оптимизирован в

  • Сделал один запрос, но поймал два запроса

    В предположении, что два запроса появляются в междоменном, междоменная проблема решается в jq с помощьюjsonpобразом, в то время как в стандарте браузера,предварительный запросявляется более элегантным решением. Проще говоря, это происходитохватывающий непростые запросы, браузер сначала отправит предварительный запрос, подтвердит с сервером, разрешен ли следующий формальный запрос, и если он разрешен, то отправит формальный запрос.

    Таким образом, мы можем обнаружить, что отправили запрос на публикацию только один раз, но поймали два запроса, не волнуйтесь, это не ошибка, это функция.

  • Кросс-оригинальный запрос без куки

    По умолчанию междоменные запросы не отправляют файлы cookie и данные аутентификации HTTP. Если вы хотите отправить cookie на сервер, с одной стороны, вам нужно согласие сервера, и укажите поле Access-Control-Allow-Credentials:Access-Control-Allow-Credentials: true, с другой стороны, разработчик устанавливает withCredentials в true при выполнении ajax-запроса, что также верноfetch.jsобработано в.

    Здесь, когда наш сервер установленAccess-Control-Allow-Credentials: true, возникает новая проблема, в стандарте браузера, когда сервер установленAccess-Control-Allow-CredentialsКогда правда,Access-Control-Allow-Originне может быть установлено на*,а такжеAccess-Control-Allow-Origin: *Это наша часто используемая настройка для решения междоменных проблем.

    У этой проблемы есть два решения: первое — просто установить белый список, второе — установитьAccess-Control-Allow-Origin: *, вы можете установить его в файле конфигурации сервера: сначала получите исходный домен, который инициирует междоменный запрос, а затем установитеAccess-Control-Allow-OriginЗначением является полученный исходный домен. Конечно, этот параметр может быть установлен в некоторых файлах конфигурации в бэкенде или может быть установлен непосредственно в файле конфигурации сервера. Но идея, вероятно, похожа.

  • Прикрепленный: fetch.js

    Простая инкапсуляция в основном решает вышеуказанные проблемы.

    import axios from 'axios'

const fetch = (
    url, 
    params = {},
    options
) => {

    let _options = Object.assign({
        method: 'get',
        toastInfo: true,
        withCredentials: true
    }, options)

    let [ _params, _data ] = _options.method === 'get' ? [ params, ''] : [ '', params]

    return axios({
            method: _options.method,
            url: url,
            params: _params,
            data: _data,
            withCredentials: _options.withCredentials
        })
        .then(res => {
            let _res = res.data

            //doSomething

            return _res
        })
        .catch(e => {

            //doSomething
            //错误上报

        })
}

export default fetch

Обратитесь к вышеуказанным вопросамHTTP-контроль доступа (CORS)Вероятно, этому можно найти разумное объяснение.

совместимость

  • Promise

Обещание совместимости является общим,vue-cliПромисы не заполняются по умолчанию в скаффолдинге.В текущем проекте ссылкаes6-promiseОбработка совместимости, грубо говоря, для настройки промиса в случае несовместимости

  • Array.prototype.findIndex

Это свойство много раз использовалось в процессе разработки. Лично я считаю его очень полезным, но совместимость тоже беспокоит. Я добавил pollyfill в base.js, и pollyfill тоже используется.Object.defineProperty, так что если vue не совместим, этот pollyfill тоже не совместим.

  • Input[type=date]

Нативный компонент выбора даты великолепен независимо от того, используется ли он на Android или ios, но он не распознается Android 4.3 и ниже.Здесь о версии системы судят по ua.Под Android 4.3 нижнее всплывающее окно используется для разрешить пользователям вводить дату. , жертвуя опытом некоторых пользователей.

  • разработка и развертывание

Давайте начнем еще одну статью по этому связанному вопросу. В этом проекте используется внешняя маршрутизация плюс несколько одностраничных приложений. Внутренняя часть предоставляет только интерфейсы и статические файловые серверы. Конкретный процесс разработки и развертывания:разработка и развертывание многостраничного проекта vue-cli + es6.

Категории