vue-cli搭建项目中axios拦截器配置及不同接口对应不同后端接口域名配置_vuecli中使用axios拦截器

一、axios基础配置

import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
//创建axios实例
const service = axios.create({
    timeout: 5000,
    withCredentials: false,
})
//请求拦截
service.interceptors.request.use(
    config => {
        if (config.isCustomHeader) {
            config.headers['FLAGINFO-CLIENTID'] = 'WEB:DC'
        }
        if (store.state.token) {
            if (config.isCustomHeader) {
                config.headers['FLAGINFO-SSO-TOKEN'] = store.state.token
            } else {
                config.headers['token'] = store.state.token
            }
        }   
        config.url = process.env.VUE_APP_WEB_API + config.url       
        // get请求缓存处理
        if (config.params) {
            config.params.f_rnd = new Date().getTime()
        } else {
            config.params = {
                f_rnd: new Date().getTime(),
            }
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

//响应拦截器
service.interceptors.response.use(
    ({ data }) => {
        // let res = respone.data; // 如果返回的结果是data.data的，嫌麻烦可以用这个，return res
        if (data.code && data.code !== 200) {
            Message({
                showClose: true,
                message: data.message || data.msg,
                duration: 2000,
                type: 'error',
            })
            return Promise.reject(data)
        }
        return data
    },
    error => {
        console.log('error：' + error) // 用于调试
        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
50
51
52
53
54
55
56
57
58

二、不同接口对应不同后端接口域名配置

export function login(data) {
    return request({
        url: '/soo/loginUrl',
        method: 'post',
        data: data,
        isUserCenter: true,
    })
}
// 判断下该用户是否存在
export function trueUser(phone) {
    return request({
        url: `/loginGet/checkUserPhone/${phone} `,
        method: 'get',
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 请求拦截器中
if (config.isUserCenter) {
   //登录接口isUserCenter
   config.url = process.env.API_USER_CENTER + config.url
} else {
   config.url = process.env.API_SERVER + config.url
}
1
2
3
4
5
6
7