接触vue已经很长时间，也经常使用axios，但是原生封装的方法都很难满足日程开发的需求，所以这期就写一下axios的封装。

作者：陈宝玉啊

转发链接：https://www.jianshu.com/p/a5c8ce9542e6

底部有完整代码

1.前期准备

创建一个js文件，命名自定。我这里定义为request.js

import axios from 'axios'  //导入原生的axios import qs from 'qs';       //导入qs,做字符串的序列化，为了后面不同的场景使用。import {  MessageBox,  Message} from 'element-ui'            //引入element-ui的两个组件，分别是消息框和消息提示         import store from '@/store'    //引入状态管理仓库import router from '@/router'  //引入路由import {  getToken} from '@/utils/auth'          //根据业务需求，这个方法是用来获取Token

2.创建实例

// 创建一个axios实例const service = axios.create({  baseURL: 'XXXXXX',         // url = base url + request url  withCredentials: true,    // 当跨域请求时发送cookie  timeout: 15000           // 请求时间})

3.请求拦截器

在发送请求之前做些什么

service.interceptors.request.use(  config => {    if (store.getters.token) {    // 让每个请求携带令牌——['Has-Token']作为自定义密钥。    // 请根据实际情况修改。    config.headers['Has-Token'] = getToken()    }    //在这里根据自己相关的需求做不同请求头的切换，我司是需要使用这两种请求头。    if (config.json) {      config.headers['Content-Type'] = 'application/json'    } else {      config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'      config.data = qs.stringify(config.data);   //利用qs做json序列化    }    return config  },  error => {    // 处理请求错误    console.log(error) // 调试    return Promise.reject(error)  })

4.响应拦截器

在收到相应后做些什么

service.interceptors.response.use(  response => {    const res = response.data    //这是响应返回后的结果    //在这里可以根据返回的状态码对存在响应错误的请求做拦截，提前做处理。    //以下为我司的处理规则    // 如果自定义代码不是200，则判断为错误。    if (res.code == 200 || res.code == 300) {      // 重新登陆      MessageBox.confirm('您的登录状态存在问题，您可以取消以停留在此页面，或再次登录', '系统提示', {        confirmButtonText: '重新登录',        type: 'warning'      }).then(() => {        store.dispatch('user/resetToken').then(() => {          location.reload();        })      })      return    } else {      if (res.code == 700) {        Message.warning('您没有获取请求的权限！')        router.replace({          path: '/401'        })        return      } else {        return res      }    }    //end  },  error => {    console.log('err' + error)    Message({      message: error.message,      type: 'error',      duration: 5 * 1000    })    return Promise.reject(error)  })

5.抛出实例

export default service

6.如何调用

//以我司请求为例子import request from '@/utils/request'export function getCity(data) {  return request({    url: '/getCity/findParentId',    method: 'post',    data  })}

7.完整代码

import axios from 'axios'import qs from 'qs';import {  MessageBox,  Message} from 'element-ui'import store from '@/store'import router from '@/router'import {  getToken} from '@/utils/auth'// 创建一个axios实例const service = axios.create({  baseURL: 'XXXXX',   withCredentials: true,   timeout: 15000 })service.interceptors.request.use(  config => {    if (store.getters.token) {    // 让每个请求携带令牌——['Has-Token']作为自定义密钥。    // 请根据实际情况修改。    config.headers['Has-Token'] = getToken()    }    //在这里根据自己相关的需求做不同请求头的切换，我司是需要使用这两种请求头。    if (config.json) {      config.headers['Content-Type'] = 'application/json'    } else {      config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'      config.data = qs.stringify(config.data);   //利用qs做json序列化    }    return config  },  error => {    // 处理请求错误    console.log(error) // 调试    return Promise.reject(error)  })service.interceptors.response.use(  response => {    const res = response.data    //这是响应返回后的结果    //在这里可以根据返回的状态码对存在响应错误的请求做拦截，提前做处理。    //以下为我司的处理规则    // 如果自定义代码不是200，则判断为错误。    if (res.code == 200 || res.code == 300) {      // 重新登陆      MessageBox.confirm('您的登录状态存在问题，您可以取消以停留在此页面，或再次登录', '系统提示', {        confirmButtonText: '重新登录',        type: 'warning'      }).then(() => {        store.dispatch('user/resetToken').then(() => {          location.reload();        })      })      return    } else {      if (res.code == 700) {        Message.warning('您没有获取请求的权限！')        router.replace({          path: '/401'        })        return      } else {        return res      }    }    //end  },  error => {    console.log('err' + error)    Message({      message: error.message,      type: 'error',      duration: 5 * 1000    })    return Promise.reject(error)  })export default service

作者：陈宝玉啊
转发链接：https://www.jianshu.com/p/a5c8ce9542e6