浅谈axios的拦截器

什么是axios？
基于promise用于浏览器和node.js的http客户端
特点
1.支持浏览器和node.js
2.支持promise
3.能拦截请求和响应
4.能转换请求和响应数据
5.能取消请求
6.自动转换JSON数据
7.浏览器端支持防止CSRF(跨站请求伪造)

今天我们说一下axios的拦截器
axios分为请求拦截器和响应拦截器
看名字就可以看出来

请求拦截器是请求之前拦截
响应拦截器是响应完成后拦截

请求拦截器

请求拦截器模板

// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

请求拦截器例子

// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {
    //在这里拦截请求,比如有的请求要token，有的不要,就可以在这加代码
            var token  = sessionStorage.getItem('token')
            if(token == null){
                return config  
            }else{
                axios.defaults.headers['token'] = token
                return config
            }
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

响应拦截器
响应拦截器模板

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

响应拦截器例子

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
     // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        // 否则的话抛出错误
        if (response.status === 200) {
            return Promise.resolve(response);
        }else {
            return Promise.reject(response);
        }
	    return response;
  }, function (error) {
       //错误响应错误，提示相应的信息
       if (error.response.status) {
            switch (error.response.status) {
                //这里我只写了一个需要401，具体需要的响应码可以自己添加
                case 401:
                     Toast({
                        message: '非法访问token失效,重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    sessionStorage.removeItem('token')
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {
                        router.replace({
                            path: '/Login',
                        });
                    }, 1000);
                    break;
               }
      }    

    return Promise.reject(error);
  });