Vue项目中，将Axios封装为一个函数，方便我们以后重复调用

//引入 Axios 
import Axios from 'axios'
//引入 Axios 请求数据所需要的配置文件，这个稍后有答案，很简单
import Config from './Config.js'
//项目中引用了 ElementUI，用加载和提示两个组件，在请求数据时，后返回状态码后的行为
import { Loading } from 'element-ui'
import { Notification } from 'element-ui'

let loading;
// 添加请求拦截器，在请求时，显示 ElementUI 的加载组件
Axios.interceptors.request.use(function (config) {
    loading = Loading.service({ fullscreen: true ,text:'疯狂加载中'});
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器 ，请求结束后，关闭 加载组件
Axios.interceptors.response.use(function (response) {
    loading.close();
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

// 封装请求数据的对象方法
class Ajax {
    static Get(url){
        // 通过Promise完成异步操作，将数据进行初步处理输出为Json对象
        var P = new Promise(function(resolve, reject){
            Axios.get(url,Config)
            .then((res)=>{
                //判断后台返回状态码，作出相应行为
                switch(res.data.status){
                    case 0:
                        Notification({
                            title : '错误提示',
                            message : res.data.message,
                            type : 'error'
                        });
                        break;
                    default:
                        resolve(res.data.data);
                        break;
                }
            }).catch((error)=>{
                console.log(error)
                reject(error);
            });
        });
        return P
    }
    static Post(url){
        var P = new Promise(function(resolve, reject){
            Axios.get(url,data,Config)
            .then((res)=>{
                console.log(res.data.data)
                switch(res.data.status){
                    case 0:
                        Notification({
                            title : '错误提示',
                            message : res.data.message,
                            type : 'error'
                        });
                        break;
                    default:
                        resolve(res.data.data);
                        break;
                }
            }).catch((error)=>{
                console.log(error)
                reject(error);
            });
        });
        return P
    }
}
// 将封装好的 Ajax函数方法输出，方便调用
export default Ajax;
   
   
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

说好的配置文件，在这里，继续向下看吧。

//Qs 是个数据处理插件，标配
import Qs from 'qs'
export default{
    //请求的接口，在请求的时候，如axios.get(url,config);这里的url会覆盖掉config中的url
    url: '/route',

    // 请求方法同上
    method: 'get', // default
    // 基础url前缀，请求数据时，会把baseURL和url拼接为完整的请求路径
    baseURL: 'Router/',
    　　
    transformRequest: [function (data) {
    // 这里可以在发送请求之前对请求数据做处理，比如form-data格式化等，这里可以使用开头引入的Qs（这个模块在安装axios的时候就已经安装了，不需要另外安装）
    　　data = Qs.stringify({});
    return data;
    }],

    transformResponse: [function (data) {
    // 这里提前处理返回的数据

    return data;
    }],

    // 请求头信息
    headers: {'X-Requested-With': 'XMLHttpRequest'},

    // `paramsSerializer` 是一个负责 `params` 序列化的函数
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
    },

    //post参数，使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象，否则会报错

    //设置超时时间，随意
    timeout: 1000,
    //返回数据类型
    responseType: 'json', // default

    // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
    validateStatus: function (status) {
        return status >= 200 && status < 300; // 默认的
    },

    // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
    // 如果设置为0，将不会 follow 任何重定向
    maxRedirects: 5, // 默认的
}
   
   
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

Axios使用手册 ，这个使用手册里面还有很多参数，看项目情况使用，我这里就不多说了。