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.最后我能想到的也就这些，若有大佬路过能够指正随便加以指点，万分感谢！