axios的再次封装

import axios from 'axios';
import NProgress from 'nprogress';
import qs from 'qs';
import 'nprogress/nprogress.css';

const codeMessage = {
    200: '服务器成功返回请求的数据。',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队(异步任务)。',
    204: '删除数据成功。',
    400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
    401: '用户没有权限(令牌、用户名、密码错误)。',
    403: '用户得到授权,但是访问是被禁止的。',
    404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
    406: '请求的格式不可得。',
    410: '请求的资源被永久删除,且不会再得到的。',
    422: '当创建一个对象时,发生一个验证错误。',
    500: '服务器发生错误,请检查服务器。',
    502: '网关错误。',
    503: '服务不可用,服务器暂时过载或维护。',
    504: '网关超时。'
};

export default function http (request) {
    const {BASE_URL, Notification, MessageBox, Loading} = request;
    let loadingService = '';
    const axiosInstance = axios.create({
        baseURL: BASE_URL,
        headers: {'Content-Type': 'application/x-www-form-urlencoded', 'BsmAjaxHeader': true},
        timeout: 20000
    });
    // 请求完成回调
    const  finishCallback = function () {
        loadingService && loadingService.close();
        NProgress.done();
    };
    // 报错处理
    const handleError = function (response) {
        const errorText = codeMessage[response.status] || response.statusText;
        Notification({
            type: 'error',
            title: `请求错误 ${response.status}: ${response.config.url}`,
            message: errorText
        });
        const error = new Error(errorText);
        error.name = response.status;
        error.response = response;
        throw error;
    };
    axiosInstance.interceptors.request.use(config => {
        let options = config.options || {};
        if (!options.loadingHide) {
            NProgress.start();
        }
        if (!options.noParam) config.data = {params: JSON.stringify(config.data)};
        if (options.abort) {
            loadingService = Loading.service();
        }
        if (config.method === 'get') {
            // 清除get缓存
            config.url = `${config.url}?t=${new Date().getTime()}`;
            config.params = config.data;
            delete config.data;
        } else {
            config.data = qs.stringify(config.data || {});
        }
        return config;
    }, error => {
        return Promise.reject(error);
    });
    axiosInstance.interceptors.response.use(data => {
        finishCallback();
        let responseData = data.data;
        let options = data.config.options || {};
        if (!responseData.success) {
            if (responseData.status == 401 || responseData.status == 509) {
                MessageBox('您已被登出,可以取消继续停留在当前页面,或者重新登录 ', '提示', {
                    confirmButtonText: '重新登录',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    location.href = '/';
                });
            } else if (!options.ignoreError) {
                Notification({
                    message: responseData.message,
                    type: 'error'
                });
            }
        }
        return responseData;
    }, error => {
        finishCallback();
        handleError(error.response);
        return Promise.reject(error);
    });
    return axiosInstance;
}
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值