axios拦截路径

《axios拦截路径》

一、解决方案

在使用axios进行网络请求时，我们可以通过配置来拦截请求和响应路径。这样可以在请求发出前对请求做一些处理，如添加公共参数、修改请求头等；也可以在响应到达后对响应数据进行预处理，像统一处理错误信息等。

二、基于axios实例的拦截路径设置

1. 创建axios实例并添加

javascript
import axios from 'axios';</p>

<p>const instance = axios.create({
    baseURL: 'https://api.example.com', // 基础url
    timeout: 5000 // 请求超时时间
});</p>

<p>// 添加请求
instance.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么
        // 例如添加token到请求头
        const token = localStorage.getItem('token');
        if (token) {
            config.headers['Authorization'] = <code>Bearer ${token};
        }
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应
instance.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        // 如果接口返回的是自定义的成功状态码（假设为0），则正常返回数据
        if(response.data.code === 0){
            return response.data.data;
        }else{
            // 处理其他情况，比如提示错误信息等
            alert(response.data.message || '请求失败');
            return Promise.reject(response.data);
        }
    },
    error => {
        // 对响应错误做点什么
        if(error.response){
            // 根据不同的HTTP状态码做不同处理
            switch(error.response.status){
                case 401:
                    // 登录过期等情况
                    alert('登录过期，请重新登录');
                    break;
                case 403:
                    alert('没有权限');
                    break;
                case 404:
                    alert('请求地址不存在');
                    break;
                default:
                    alert('未知错误');
            }
        }
        return Promise.reject(error);
    }
);

三、全局配置拦截路径思路

如果不想创建新的axios实例，而是直接对全局的axios对象进行配置也是可以的。代码如下：

javascript
import axios from 'axios';</p>

<p>// 请求
axios.interceptors.request.use(
    config => {
        const token = sessionStorage.getItem('userToken');
        if(token){
            config.headers.Authorization = <code>Bearer ${token};
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 响应
axios.interceptors.response.use(
    response => response,
    error => {
        if(error.response && error.response.status === 401){
            console.log('全局拦截：登录过期');
        }
        return Promise.reject(error);
    }
);

这两种方式都可以实现axios拦截路径的功能，可以根据项目的需求选择合适的方式。通过拦截路径，能够使我们的网络请求更加规范、安全，并且可以简化很多重复性的操作。