vue-axios 全局配置_vue axios全局配置

1.添加默认的请求头，包括登录验证和普通的请求验证。
2.支持导出功能。
3.get方法，请求参数做encodeURIComponent。
4.response可根据约定好的code 跳转的指定页面（token过期后跳转到登录页面）
5.根据返回结果的content-type判断接口返回是否为‘application/octet-stream’，实现文件下载
api.js

/**jshint esversion: 6 */
import axios from 'axios';
import globalConfig from './http.js';  //全局配置信息
import router from '@/router/router.js';

axios.defaults.timeout = 60000; // 超时时间
axios.defaults.baseURL = globalConfig.apiUrl; // 默认地址

axios.defaults.transformRequest = function (data) {
    data = JSON.stringify(data);
    return data;
};

// 路由请求拦截
// http request 拦截器
axios.interceptors.request.use(
    config => {
        let url = config.url;
        // get参数编码
        config.headers['Content-Type'] = 'application/json;charset=UTF-8';
        //已经和后台约定，导出的接口参数中包含'export'，标记为导出接口
        //设置返回格式为blob
        if (config && config.params && config.params.export) {
            config.responseType = 'blob';
        }
        //get方法转义
        if (config.method === 'get' && config.params) {
            url += '?';
            let keys = Object.keys(config.params);
            for (let key of keys) {
                url += `${key}=${encodeURIComponent(config.params[key])}&`;
            }
            url = url.substring(0, url.length - 1);
            config.params = {};
        }
        config.url = url;
        if (config.url === '/api/area/get-list') {
            return config;
        } else if (config.url === '/admin/auth/login') {
        //登录接口 特殊处理，在请求头添加 Captcha-Session
            let session = localStorage.getItem('Captcha-Session');
            config.headers['Captcha-Session'] = session;
            return config;
        }
        let token = localStorage.getItem('Access-Token');
        //在请求头中添加Access-Token
        config.headers['Access-Token'] = token;
        return config;
    },
    error => {
        return Promise.reject(error.response);
    });

// 路由响应拦截
// http response 拦截器
axios.interceptors.response.use(
    response => {
        const headers = response.headers;
        if (response && response.data && response.data.code === 20007) {
            localStorage.setItem('Access-Token', "");
            window.setTimeout(function () {
                router.push('/login');
            }, 2000);
            return response;
        } else if (headers['content-type'] === 'application/octet-stream') {
       //判断文件返回，下载文件
            let url = window.URL.createObjectURL(new Blob([response.data]));
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', 'excel.xlsx');
            document.body.appendChild(link);
            link.click();
        } else {
            return response;
        }
    },
    error => {
        return Promise.reject(error.response); // 返回接口返回的错误信息
    });
export default axios;

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

main.js 配置

import axios from './httpConfig/api.js';
import VueAxios from 'vue-axios';

...

Vue.use(VueAxios, axios);
1
2
3
4
5
6

使用方式
get请求的传参与post请求的传参有差别

//get
var params = {keywords:'xx'};
this.axios
 .get(url, { params: params })
 .then(response => {
   if (response.data.code === 200) {
   //处理返回结果
   } else {
      this.$message.error(response.data.message);
   }
});
//post


var params = {keywords:'xx'};
this.axios
 .post(url, params )
 .then(response => {
   if (response.data.code === 200) {
   //处理返回结果
   } else {
      this.$message.error(response.data.message);
   }
});

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