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

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

几个要点：

• 状态码拦截

  • 跳转回登录页
  • 全局ElMessage提示
  • …

• 发送请求带上LocalStorage里的Token

• 判断是否是二进制文件流

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

代码

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88