如何在vue中全局配置axios【傻瓜式教程】_vue全局使用axios

Axios：这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。

第一步：

安装axios包

yarn add axios --save
1

第二步：

在src目录下新建axios文件夹，在里面新建index.js文件。里面对axios进行一系列封装，包括添加拦截器和封装请求。
src->axios->index.js

// 导入安装的axios
import axios from 'axios'
// 导入elementUI错误消息提示
import { Message } from 'element-ui'
// 导入路由
import router from '../router/router'

// 创建axios请求实例,并暴
const myaxios = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 1000,
    headers: { 'X-Custom-Header': 'foobar' }
});

// 添加请求拦截器
myaxios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 一般是添加token再发送
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
myaxios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // 如果业务逻辑错误
    if (response.status || response.status === 200) {
        // 如果返回数据中code=500,或者是未登录401,权限错误403
        if (response.data.code === 500 || response.data.code === 401 || response.data.code === 403) {
            Message.error({ message: response.data.message });
            return;
        }
        // 如果是其他
        if (response.data.message) {
            Message.success({ message: response.data.message });
        }
    }
    return response.data;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    if (error.response.data.code === 504 || error.response.data.code === 404) {
        Message.error({ message: '服务器被吃了( •̀ ω •́ )' });
    } else if (error.response.data.code === 403) {
        Message.error({ message: '权限不足，请联系管理员' });
    } else if (error.response.data.code === 401) {
        Message.error({ message: '尚未登录，请登录！' });
        //跳往登录界面
        router.push('/');
    } else {
        if (error.response.data.message) {
            Message.error({ message: error.response.data.message });
        }else{
            Message.error({ message:'未知错误去( •̀ ω •́ )✧'});
        }
    }
    return;
});
//暴露接口
export default myaxios;
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

第三步：在main.js文件中全局引入配置好的myaxios。这样你在任何一个组件里都可以使用
this.$axios.get()、this.$axiso.post() 等等直接向服务器发送请求。
main.js

import Vue from 'vue'
import App from './App.vue'
import myaxios from './utils/axios'

// 关闭vue的提示
Vue.config.productionTip = false
// 给全局Vue实例对象添加axios属性
Vue.prototype.$axios = myaxios;

new Vue({
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13