Некоторые распространенные варианты использования axios

Vue.js Ajax axios

axiosЭто библиотека, которая очень часто используется во фронтенд-разработке. Он работает как в браузере, так и в бэкэнд-проектах Node.js. Эта статья в основном объединяет мои собственные проекты разработки, чтобы рассказать о некоторых распространенных случаях использования аксиом в браузерах.

Основное использование

В процессе разработки проекта вы можетеaxios.createСоздайте экземпляр, выполните некоторую настройку экземпляра и получите функцию ajax, предназначенную для связи с внутренним сервером.

const instance = axios.create()

Вот некоторые конфигурации для этого экземпляра:

baseURL

В формальной среде или среде разработки настройтеbaseURLЭто позволяет нам легко устанавливать правила переадресации маршрутизации.

const instance = axios.create({
    baseURL: '/api/'
})

header

В одностраничном приложении задайте некоторую информацию в заголовке запроса, например поместите токен в заголовок запроса.

// 继续对刚刚创建的示例进行配置
instance.defaults.headers.common['x-auth-token'] = 'some token'

interceptors

Запросы и ответы обрабатываются путем настройки перехватчиков.
Предположим, что возвращаемое значение с этого сервера имеет следующую структуру:

{
    code: 200, 
    data: Object,
    msg: ''
}

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

// 处理响应成功
// axios 会对响应的结果进行一层封装，直接取data
instance.interceptors.response.use(({data}) => {
    if (data.code === 200) {
        return data.data
    } else {
        console.error(res)
        // 假设这里有一个 Toast 组件
        Toast(res.msg)
        return Promise.reject({
            msg: msg
        })
    }
})

использование параметров

Иногда вызывайте интерфейс со многими условиями запроса, используйтеaxios.getПри переходе в содержащееparmasОбъекты полей - самый удобный способ.

let params = {
    keyWord: null,
    name: 'xxx',
    age: 22
}
// 为 null 的属性都会被过滤掉，最终的请求 url 是 /person?name=xxx&age=22
instance.get('/person', { params })

Загрузить файл в пример Qiniu

надinstanceОн используется для связи с серверной частью. Теперь загрузите файл в Qiniu и используйте axios, чтобы загрузить его напрямую. согласно сДокументация разработчика Qiniu, отправьте объект FormData на сервер Qiniu. Этот объект FormData должен содержать токен и файл.

// 假设这里有一个 input 框： <input id="input" type="file" />
const file = document.getElementById('input').files[0]
const formData = new FormData()
formData.append('token', token) // token 由服务器端生成
formData.append('file', file)
axios.post('http://upload.qiniu.com/', formData).then(({ data }) => {
    console.log(data) // 返回值
})

Для операции загрузки файлов требуется много времени.Прослушивая событие progress, вы можете получить информацию о ходе загрузки. Код для загрузки файла нуждается в некоторой настройке.

axios.post('http://upload.qiniu.com/', {
    data: formData,
    onUploadProgress: (e) => {
        const percentComplete = e.loaded / e.total // 上传的进度
    }
}).then(({ data }) => {
    console.log(data) // 返回值
})

В некоторых сценариях вам необходимо загрузить изображение в кодировке base64. согласно сЦинью загрузить файл, при загрузке установить заголовок запросаContent-Typeа такжеAuthorization, поместите изображение в кодировке base64 в тело пакета запроса. Код здесь нуждается в некоторой настройке.

axios({
  method: 'post',
  url: 'https://upload.qiniup.com/putb64/-1',
  headers: {
    'Content-Type': 'application/octet-stream',
    Authorization: `UpToken ${token}`
  },
  data: imgSrc.split('base64,')[1] // 直接传递内容
})

Совместно с государственной библиотекой управления

В одном веб-приложении информация о токене пользователя сохраняется в Магазине. Когда пользователь входит в систему или когда срок действия токена истекает, некоторые параметры экземпляра AXIOS необходимо динамически изменять.
Предположим, что библиотека управления состоянием, которую мы здесь используем, называется Redux.
В перехватчике определите, истек ли срок действия токена.

instance.interceptors.response.use(({data}) => {
    if (data.code === 200) {
        return data.data
    } else if (data.code === 40001){ // code: 40001 表示 token 过期
      store.commit(CLEAR_TOKEN)
    }
    ...
})

При изменении хранилища динамически меняйте информацию о маркере, передаваемую серверной части.

store.subscrible(() => {
    instance.defaults.headers.common['token'] = store.getState().token
})

Используйте с Vue

В проекте многие компоненты должны импортировать библиотеку axios. Если в проекте используется Vue, зарегистрируйте экземпляр axios как подключаемый модуль Vue, чтобы избежать повторного повторного импорта. Зарегистрируйтесь, добавив метод экземпляра VueVue-плагинВот и все.

// http.js 创建 instance
// 导出一个包含 install 函数的对象
export default {
  install (Vue) {
    Vue.prototype.$http = instance
  }
}
// main.js
Vue.use(http) // 在 Vue 组件中 this.$http 就可以发起请求了
Категории