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
[/code]

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

//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
[/code]

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

</div>