axios二次封装

import axios from 'axios'
import qs from 'qs'
import ErrorCode from './error'//封装code错误时对应的提示
import router from '../router/index' //这里的router 请找你对应的router
import {
  Message
} from 'element-ui';
const service = axios.create({
  baseURL: "http://localhost:3000", // 封装请求地址的前缀
  timeout: 5000 // 超时时间
}) 

封装请求头

service.interceptors.request.use(config => {
    /**
     * 请求之前判断token是否存在或者过期，如果过期直接跳转到登陆页面，再次获取token，在这里你还可以做其他判断
     * **/
    if(!sessionStorage.getItem("token")) {
        router.push('/Login')
    }
    if (config.method === "post") {
      // 序列化,若是能直接接受json 格式,可以不用 qs 来序列化的
      config.data = qs.stringify(config.data);
    }    
    return config
  }, error => {
    loadinginstace.close()
    Message.error({
      message: '加载超时'
    })
    return Promise.reject(error)
})    

封装响应

service.interceptors.response.use(function (response) {    
    if(response.data.code != 200){ //这里约定后台返回code为200时为正确的请求响应    
      Message.error({
        message: `${ErrorCode[response.data.code]}`//这里code不是200的时候显示自己封装的错误code提示
      })      
    }
        return response.data
    }, function (error) {
        // 对响应错误做点什么
    return Promise.reject(error);
});

封装post请求

   export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
      let parms = {
        token:"4552565215"
      }
      service.post(url,Object.assign(parms,data))//可以把你项目的必传项又不会发生改变的例如token 封装再这里就不用每次写token了
        .then(response => {
          resolve(response);
        }, err => {
          reject(err)
        })
        .catch(res => {
          console.log("超时处理",res)
        })
    })
  }

ErrorCode示例

const ErrorCode = {
    "100":"错误1",
    "101":"错误2",
    "102":"错误3",
    "103":"错误4",
    "104":"错误5",
}
export default ErrorCode 

最后说说我理解的为什么要封装axios

1.在请求拦截中先需要判断一些必要的因素比如没有token的话需要直接跳转login页面重新获取。
2.默认前缀比如"http://baidu.com",然后上线之前使用本地的前缀，上线前改成你的线上地址再打包，当让这里可以使用webpack的配置来判断开发环境和生产环境使用不同地址。这个就看你自己了
3.在响应拦截中可以统一判断返回的code显示对应的错误信息。给用户以提示，
4.在封装对应的get或者post的时候把一些固定必传的参数加上去，写其他请求时加上改请求的其他参数就好了
5.超时的设置，以及超时后的一些处理，是重新请求还是做其他操作。
6.最后我能想到的也就这些，如有大佬路过可以指正随便加以指点，万分感谢！