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 })

---

与状态管理库配合使用

在单网页应用中，用户的 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完整的拦截Demo

AxiosConfig.js

import Axios from 'axios'
import Router from '@/router'
var Constant = require('@/common/constant.js')

const axiosInstance = Axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: Constant.API_TIME_OUT
})

var msger = require('@/common/messager.js')
// intercept the requst
axiosInstance.interceptors.request.use(config => {
  config.headers['apiKey'] = Constant.API_KEY
  return config
},
 error => {
   msger.popMessage(error, 'error')
   Promise.reject(error)
 })

 // intercept the response
axiosInstance.interceptors.response.use(response => { 
    console.log(response.data)
  if (response.data !== null && response.data.status === 'ok') {
    return response.data
  } else {
    var excpMsg = ''
    if (response.data !== null) {
      excpMsg = response.data.message
    } else {
      excpMsg = response
    }
    .................
    }
    return Promise.reject(response.data)
  }
}, 
error => {  
    if (error && error.response) {
      .................
    } else {
      let errorJson = JSON.parse(JSON.stringify(error))
      msger.popMessage(errorJson.message + '(Network connection failed)', 'error')
    }
    return Promise.reject(error)
})

export default axiosInstance

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store'
import axios from './api/AxiosConfig'

Vue.config.productionTip = false
Vue.prototype.$axios = axios
var msger = require('@/common/messager.js')
Vue.prototype.$msger = msger
Vue.use(ElementUI, { locale })

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')