vue项目配置请求拦截或者响应拦截

我们在做后台管理系统时通常会封装统一的http请求，这样方便我们来管理axios请求配置

1. 我们通常会在请求是定义一个超时时间
2. 在请求拦截器中做token的：超时、更新、headers请求头的处理
3. 在响应拦截器中做 请求失败状态时的错误处理和成功直接返回结果。

先npm install axios --save

配置响应拦截器 

现在src下建立utils文件夹 建立api.js,目录如下

 

import axios from 'axios';//引入axios
import router from '../router';
import {Toast} from 'vant';


const globalKey=Math.floor(Math.random()*10000000000);

// console.log(localStorage.getItem('token'))
const instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL,
    // 不能写在这儿 写在这儿刚登陆拿不到token
    // headers: {
    //     'token': localStorage.getItem('token') ? JSON.parse(localStorage.getItem('token')) : ''
    // },
    timeout: 10000,
});

// 请求拦截器
instance.interceptors.request.use(
    // 在发送请求之前做些什么
    (config)=>{
        config.headers.AccessKey = globalKey;
        // console.log(config.headers.AccessKey)
        if(localStorage.getItem('token')){
            config.headers.token = JSON.parse(localStorage.getItem('token'))
        }
        return config;
    },
    // 在请求错误做些什么
    (error)=>{ return Promise.reject(error)}
)

// 响应拦截器
instance.interceptors.response.use(
    // 在响应数据之前做些什么
    (response)=>{
        // console.log(response,response.data.message === "登录失效");
        if(response.data.message === '登录失效'){
          console.log('123456')
          window.localStorage.clear();
          router.push('/login').catch(err => { return err });
          Toast({
            duration:3000,
            message: '登陆失效，请重新登录',
            position:'bottom',
          })
          return;
        }
        if(response.status === 200){
           return response;
        }else{
           return Promise.reject(error); 
        };  
    },
    // 在响应错误做些什么
    (error)=>{

        return Promise.reject(error);
    }
)

export default instance;