axiso请求拦截器,响应拦截器

npm install axios
axios 依赖原生的 ES6 Promise 实现

// 全局的 axios 默认值
import { baseURL } from './common.js' //接口域名引入
axios.defaults.baseURL = baseURL;
axios.defaults.timeout = 10000; //超时毫秒 60s

// 请求拦截器
axios.interceptors.request.use(
    config =>{
        // 在发送请求之前做些什么:headers添加token
        config.headers['token'] = 'c5d1b483-18c8-4690-b829-48b8f525f527';
        
        loading
        Toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            mask: false, // 是否显示遮罩层
            message: '数据加载中...',
        });
        
        // 特定接口不显示数据加载中提示
        // if (config.url.includes('/api/mobile/index.php?w=member_favorites&t=favorites_add')) {
        //     // 清除加载动画
        //     Toast.clear();
        // } else {
        //     Toast.loading({
        //         duration: 0, // 持续展示 toast
        //         forbidClick: true, // 禁用背景点击
        //         mask: false, // 是否显示遮罩层
        //         message: '数据加载中...',
        //     });
        // }
        
        return config;
    }, 
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
)

// 响应拦截器
axios.interceptors.response.use(
    response => {
        // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
        // 否则的话抛出错误
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 404请求不存在
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
    
                case 500:
                    Toast({
                        message: '内部服务器错误',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
    
                    // 其他错误,直接抛出错误提示
                default:
                    Toast({
                        message: error.response.data.msg,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }
);

// 如果想在稍后移除拦截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
发布了76 篇原创文章 · 获赞 144 · 访问量 3037

猜你喜欢

转载自blog.csdn.net/qq_40745143/article/details/103887206