封装axios

2021/10/6 23:15:07

本文主要是介绍封装axios,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

/**
 * 全站http配置
 *
 * axios参数说明
 */
import axios from 'axios';
import { Message } from 'element-ui';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

//默认超时时间
axios.defaults.timeout = 10000;
//返回其他状态码
axios.defaults.validateStatus = function(status) {
    return status >= 200 && status <= 500;
};
//跨域请求,允许保存cookie
axios.defaults.withCredentials = true;
// NProgress 配置
NProgress.configure({
    showSpinner: false
});
//http request拦截
axios.interceptors.request.use(config => {
    //开启 progress bar
    NProgress.start();
    return config
}, error => {
    return Promise.reject(error)
});
//http response 拦截
axios.interceptors.response.use(res => {
    //关闭 progress bar
    NProgress.done();
    //获取状态码
    const status = res.data.code || res.status;
    const message = res.data.msg || res.data.error_description || '未知错误';
    // 如果请求为非200否者默认统一处理
    if (status !== 200) {
        Message({
            message: message,
            type: 'error'
        });
        return Promise.reject(new Error(message))
    }
    return res;
}, error => {
    NProgress.done();
    return Promise.reject(new Error(error));
});

export default axios;



这篇关于封装axios的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程