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-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] // 直接传递内容
})复制代码

与状态管理库配合使用

在单网页应用中，用户的 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 就能够发起请求了复制代码