axios的请求拦截与相应拦截

问题:

1.请求携带token
2.全局的请求loading

解决:

解决携带token问题 --初次登陆获取token保存在本地

1.每一个需要token的请求都携带token,但是代码重复很多,

request.Gethighquality = (params) => {
    return request.get('/top/playlist/highquality', { params, headers:{Authorization: localStorage.getItem('token') || ''} })
}

2.使用封装的思想,把token封装都请求方式中,这种方式对于携带token来说不麻烦,但是对于请求来说不是利于维护,
参数传递路径,请求方式,参数,…分别在不同的组件,不利于后期的维护
3.想对比来说请求拦截的方式最为便捷, 具体代码看下面的综合案例

import Axios from 'axios'
import { Loading,Message  } from 'element-ui';

const request = Axios.create({
    baseURL: "https://api.mtnhao.com/"
})

//请求拦截
request.interceptors.request.use(requeststart,handleError)

//相应拦截
request.interceptors.response.use(responseend, handleError)

let loading;
//主要是为了把统一时刻的请求合并
let startcount = 0;
let AUTH_TOKEN = localStorage.getItem('token')
//请求拦截
function requeststart(config) {
    // console.log(config);
    //统一添加请求头 ,只要有请求就会携带token
    config.headers = {
        Authorization: AUTH_TOKEN
    }
    //添加统一的loading,Loading.service 会创建一个 loading 实例 ,可通过调用该实例的 close 方法来关闭
   //在第一次请求 和 loading 还没有创建过之前 创建loading
    if (startcount === 0 && !loading) {
        loading = Loading.service({
            target: "body",
            text: '数据加载中',
            background: 'rgba(255,255,255,0.4)',
        });
    }
    startcount++
    return config;
}
//相应拦截
function responseend(response) {
    // console.log(response);
  //只要返回无效token,就跳转到login页面重新登录
    if(response.data.meta.status === 400 && response.data.meta.msg === '无效token'){
        router.push('/login')
    }

    //取消loading,startcount === 0 说明相应全部回来之后再关闭loading
    startcount--;
    if (startcount === 0) {
        loading.close();
        loading = null;
    }
    return response;
}
//错误处理
function handleError(e) {
    Message.error({message:e.message})
    throw e
}

export default request;