vue项目中axios拦截器的使用

废话不说,直接上代码,拿走直接使用,需要什么再根据需要添加什么就行。(应该不用解释,代码里都有注释)

// 引入axios
import axios from 'axios'
import { Message } from 'element-ui'
import md5 from 'js-md5';

/**
 * (暂时加入'x-org-id':123,'x-project-id':123,'x-tenant-id':123,)
 */
export const getAdminInfo = () => fetch('/admin/info');
let headers = {
    'Content-Type': 'application/json;charset=utf-8',
    'endpoint': 'AJAX',
    'x-org-id': 123,
    'x-project-id': 123,
    'x-tenant-id': 123,
}

let baseURL = process.env.BASE_URL;
// let baseURL = process.env.PRO_URL;

let http = axios.create({
    baseURL: baseURL, // 域名/
    // timeout:5000,//超时时间
    withCredentials: true, // 是否支持跨域
    headers: headers
});

http.interceptors.request.use(
    config => {
        //请求参数统一加密处理,生成sign
        console.log(config,"拦截器config")
        let appid = localStorage.getItem('appid')
        let secret = localStorage.getItem('secret')
        if(secret && appid){
            let params = config.params || config.data
            console.log(params,"拦截器params")
            if(!params.sign){
                params.appid = appid;
                let ordereParams = '';
                Object.keys(params).sort().forEach(key => {
                    let value = String(params[key])
                    let name = String(key);
                    ordereParams = ordereParams + name + value;
                });
                let waitSign = secret + ordereParams + secret;
                let sign = md5(waitSign).toUpperCase();
                params.sign = sign;
            }
        }
        
        return config;
    },
    error => {
        // 1. 判断请求超时
        if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
            Message({
                message: 'timeout请求超时',
                type: 'error',
                duration: 5 * 1000
            });
        } else {
            Message({
                message: error.message,
                type: 'error',
                duration: 5 * 1000
            });
        }
        return Promise.reject(error)
    }
);
// response 拦截器
http.interceptors.response.use(
    response => {
        return response.data;
    },
    err => {
        if (err && err.response) {
            switch (err.response.status) {
                case 400:
                    err.message = '请求错误'
                    break
                case 401:
                    if (err.response.data.logoutUrl !== undefined) {
                        window.sessionStorage.clear();
                        window.location.href = err.response.data.logoutUrl;
                    }
                    break
                case 403:
                    err.message = '拒绝访问'
                    break
                case 404:
                    err.message = `请求地址出错: ${err.response.config.url}`
                    break
                case 408:
                    err.message = '请求超时'
                    break
                case 500:
                    err.message = '服务器内部错误'
                    break
                case 501:
                    err.message = '服务未实现'
                    break
                case 502:
                    err.message = '502 bad gateway'
                    break
                case 503:
                    err.message = '服务不可用'
                    break
                case 504:
                    err.message = '504错误 超时'
                    break
                case 505:
                    err.message = 'HTTP版本不受支持'
                    break
                default:
            }
        }
        Message({
            message: err.message,
            type: 'error',
            duration: 5 * 1000
        });
        return Promise.reject(err)
    }
)
export default http

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值