axios的一些常见用法

axios 是一个在前端开发中是使用频率极高的库。它既能运行在浏览器中,又可在 Node.js 后端项目中使用。本文主要结合自己的开发项目,谈一下 axios 在浏览器中的一些常见用法。

基本用法

在项目开发中,可以通过 axios.create 创建一个实例,对该实例进行一些配置,便得到了一个专门用来与后端服务器进行通信的 ajax 函数。

const instance = axios.create()

下面一些对该实例的配置:

baseURL

在正式环境或者是开发环境,配置 baseURL 可以让我们很方便的设置路由的转发规则。

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

header

在单网页应用中,通过在请求头设置一些信息,比如说把 token 放在请求的头部。

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

interceptors

通过配置拦截器,对请求与响应进行处理。
假设这里服务器的返回值类似这种结构:

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

其中 data 是我们真正需要的信息,添加一个 response 的拦截器处理提取其中的 data 。通过检查 code 值,判断响应值是否符合要求。不符合要求时,只返回错误信息,在之后的回调函数处理错误即可。

// 处理响应成功
// 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
        })
    }
})

params 的用法

有些时候,调取一个有查询条件较多的接口,使用 axios.get 时传入一个包含 parmas 字段的对象是最便捷的方式。

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

上传文件到七牛示例

上文的 instance 是用来与服务器端通信的。现在上传文件到七牛,直接使用 axios 来上传。 根据 七牛开发者文档 ,向七牛服务器提交一个 FormData 对象即可。这个 FormData 对象中必须包含 token 与 file 。

// 假设这里有一个 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-TypeAuthorization,在请求的包体内放入 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] // 直接传递内容
})

与状态管理库配合使用

在单网页应用中,用户的 token 信息是保存在 store 中的。当用户登录或者是检测到token 过期时,需要做动态改变 axios 实例的一些参数。
假设我们这里使用的状态管理库是 Redux。
在拦截器中,判断 token 是否过期。

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 发生改变时,动态改变传递给后端的 token 信息。

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

与 Vue 配合使用

在项目中,许多的组件都要导入 axios 库。如果项目使用是 Vue,把 axios 实例注册成 Vue 插件,避免了重复再导入的问题。通过添加 Vue 实例方法注册 Vue 插件 即可。

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