vue中封装axios，添加请求拦截器，响应拦截器_添加请求拦截器 is not defined

vue中封装axios，添加请求拦截器，响应拦截器

首先在vue项目中src文件夹下新建request文件夹，关于接口封装文件都放在request文件夹中。
然后在request文件夹中创建index.js,url.js,api.js三个js文件。

url.js文件主要放置项目中api请求域名和打包的域名（包括测试环境，预生产环境，生产环境）

const VUE_APP_MODE = process.env.VUE_APP_MODE;
let baseURL;
if (VUE_APP_MODE == 'development') { // 本地
    baseURL = 'http://127.0.0.1:8888';//测试地址
} else {
    // pre 预生产
    // prod 生产
    switch (VUE_APP_MODE) {
        case 'test':// 测试
            baseURL = 'http://test.com/api';
            break;
        case 'pre':// 预生产
            baseURL = 'http://pre.com';
            break;
        case 'prod':// 生产
            baseURL = 'http://prod.com';
            break;
        default:// 测试
            baseURL = 'http://test.com';
            break;
    }
}
module.exports = {
    baseURL
};
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

index.js文件主要对axios封装，添加请求拦截器和响应拦截器

/**
 * 请求封装
 */
import axios from 'axios';
import configUrl from './url.js';
import store from '../store';

const service = axios.create({
    baseURL: configUrl.baseURL,
    // withCredentials: true, // 当跨域请求时发送cookie
    timeout: 15000 // 请求超时
});

//添加请求拦截器   请求接口统一添加token
service.interceptors.request.use(
    config =>{
        config.headers.token = store.getters.token || '';  //请求添加token
        return config;
    },
    error =>{
        return Promise.reject(error);
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        //如果接口返回token，替换本地旧token
        if (response.headers.token) {
            sessionStorage.setItem("token", response.headers.token);
        }
        //自定义设置后台返回code对应的响应方式
        if (response.data.code == 203) { // 未登录或登录超时
            return Promise.reject(new Error('登录超时'));
        } else { //接口正常，返回数据
            return response;
        }
    },
    error => {
        if (error.message) {
				// this.$massage.error('服务器开小差了，请稍后再试!')   
				//错误响应
				alert('服务器开小差了，请稍后再试!')   
        }
        return Promise.reject(error);
    }
);
//暴露出封装过的服务
export default service;
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

api.js文件主要放置项目中的接口 （post和get两种参数不同，注意区别data和params）

//引入上边封装的axios文件
import request from "@/request";
// import QS from "qs";  


//获取用户信息  post请求
export const getUserInfo = data => {
    return request({
        url: "/user/info",
        method: "POST",
        headers:{
            "content-type": "application/json;charset=UTF-8"
        },
        data
    });
};

//下载用户上传模板   get请求
export const downLoadTemplate = params=> {
    return request({
        url: "/user/info/template",
        method: "GET",
        headers:{
            "content-type": "application/json;charset=UTF-8"
        },
        params
    });
};

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

以上就是axios的封装方法，请求拦截器和响应拦截器的添加方法。

api的使用方法：

<template>
<div>
</div>
</template>
<script>
import { getUserInfo } from '@/request/api'
export default {
    name:'',
    components: {},
    data() {
        return { }
    },
    methods: {
        getUserInfo(data={}){//获取用户信息
        	const loading = this.$loading()  //请求响应开始，打开loading
            const params = { //参数
                phone:this.phone,
                password:this.password,
            }
            getUserInfo(params).then(res=>{
                if(res.data.code===200){
                	// 请求成功callback
                }else{
                   // 请求失败callback
                    this.$messageError.call(this,res.data.msg)
                }
                loading.close()  //请求响应结束，关闭loading
            }).catch(()=>{
                loading.close()  //请求响应结束，关闭loading
            })
        },
    }
}
</script>
<style lang='scss' scoped>

</style>

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

如果感觉以上代码有用，请点个赞，谢谢！