[Js进阶]axios简要全局封装

最新推荐文章于 2024-07-03 08:00:00 发布

豆子前端

最新推荐文章于 2024-07-03 08:00:00 发布

阅读量175

点赞数

分类专栏：前端文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/qq_41996454/article/details/128208484

版权

前端专栏收录该内容

177 篇文章 11 订阅

订阅专栏

[Js进阶]axios简要全局封装

几个要点：

状态码拦截
- 跳转回登录页
- 全局ElMessage提示
- …
发送请求带上LocalStorage里的Token

判断是否是二进制文件流

const resType = Object.prototype.toString.call(response.data);
// console.log('resType========', resType);
const isBlob = resType === '[object Blob]';

代码

import axios from 'axios';
import { ElMessage } from 'element-plus';
import { router } from '@/router/index.js';
import { i18n, $tc } from '@/locales/setupI18n';

let baseURL = '/api';
if (process.env.NODE_ENV === 'development') {
    baseURL = 'http://xxxx:31993/api/';
if (process.env.NODE_ENV === 'production') {
    baseURL = 'http://xxxx:80/api/';
}
const $http = axios.create();
baseURL = baseURL.replace(':80/', '/');
$http.defaults.baseURL = baseURL;
// $http.defaults.timeout = 20000;
$http.defaults.headers['common']['X-Requested-With'] = 'XMLHttpRequest';
$http.defaults.withCredentials = true;

$http.interceptors.request.use(
    config => {
        console.log('请求前拦截');
        console.log(config);

        if (!config.headers['Content-Type']) {
            config.headers['Content-Type'] = 'application/json';
        }
        config.headers['Accept-Language'] = i18n.global.locale.value;
        if (localStorage.getItem('SonicToken')) {
            config.headers.SonicToken = localStorage.getItem('SonicToken');
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);

$http.interceptors.response.use(
    response => {
        console.log('响应拦截');
        console.log(response);

        // 如果是没有状态码的响应
        if (!response.data.code) {
            const resType = Object.prototype.toString.call(response.data);
            // console.log('resType========', resType);
            const isBlob = resType === '[object Blob]';
            if (isBlob || resType === '[object String]') return response;
        }

        // 如果有响应的状态码
        switch (response.data.code) {
            case 2000:
                break;
            case 1001:
                if (router.currentRoute.value.path !== '/Login') {
                    router
                        .replace({
                            path: '/Login',
                            query: { redirect: router.currentRoute.value.path }
                        })
                        .catch(err => {});
                }
                localStorage.removeItem('SonicToken');
                break;
            case 1003:
                ElMessage.error({
                    message: $tc('dialog.permissionDenied')
                });
                break;
            default:
                if (response.data.message) {
                    ElMessage.error({
                        message: response.data.message
                    });
                }
        }
        return response.data;
    },
    err => {
        ElMessage.error({
            message: '系统出错了！'
        });
        return Promise.reject(err);
    }
);

export default $http;