Vue项目之Axios数据请求

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使用手册 ，这个使用手册里面还有很多参数，看项目情况使用，我这里就不多说了。

                </div>