axios 拦截器的配置

import axios from 'axios';
import qs from 'querystring';
import router from '../router/index.js';

// 返回登录页面 这是为接口中权限不够的人  返回登录页面所设置的
const toLogin = () =>{
    router.push({
        path:'/login'
    })
}

// 错误信息处理
const errorHandle = (status, other) => {
    switch(status) {
        case 400:
            console.log('请求错误');
            //前后端传参数据问题？
            break;
        case 401:
            console.log('权限不够')
            // 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
            // 甚至光返回登录页面还不行 还要清除vuex中用户信息 清除localStorage
            toLogin()
            break;
        case 403:
            // token 过时了？
            // 服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。
            toLogin()
            break;
        case 404:
            console.log('资源未找到')
            break;
        default:
            console.log(other)
            break;
    }
}

var instance = axios.create({timeout:5000}); // 创建axios实例
// 注意这个也可能是 其他值 比如application/json
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

instance.interceptors.request.use(function(config){
    console.log(config)
    const user = localStorage.getItem('token')
    if(user){
        // 这个是可选的  使用token 并且和后端约定在请求头中添加的时候才需要
        config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
    }
    if(config.method === 'post') {
        //注意这是有意你之前设置的Content-Type的原因 否则这步骤可以省略
        // 而且你要考虑  后端如果不同的接口 有些事json 有些是 x-www-form-urlencoded 就要在具体调用接口的时候区别了 而省略这部
        config.data = qs.stringify(config.data) 
    }
    return config;
},function(err){
    return Promise.reject(err)
})

instance.interceptors.response.use(function(res){
    if(res.status === 200) {
      return Promise.resolve(res)
    }else{
      return Promise.reject(res)
    }
},function(err){
    const {response} = err; //解构
    if(response){
        errorHandle(response.status,response.data.message)
        return Promise.reject(response)
    }else{
        console.log('断网了')
    }
})

export default instance;

这是axios.js

这是需要引入vue的main.js  Vue.portotype.$axios = instance

this.$axios.get(url,{params:{id:1}}).then(()=>{
​​​​​​​)

this.$axios.post(url,{name:'刘少伟'}).then(()=>{
​​​​​​​)

注意：这种针对axios拦截器方式的封装 适合的是有登陆、退出等功能的完整项目，很大可能结合vuex、token等登陆状态功能和路由结合的项目，

           如果你只是很简单的页面展示，获取数据，不涉及到页面登陆也不涉及记录用户登陆状态 的项目，呢就不需要设置这么多的封装了 直接使用axios或者简单的封装个get和post即可，不需要写这么多的封装代码。

简单axios封装在这里：https://blog.csdn.net/Future1994/article/details/109698273

也是我自己写的