Vue整合Axios，封装API
Axios官方API
1.安装axios
1
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
2.封装axios
在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。所以官方也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步Axios官方API。
2.2 引入
在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js；新建一个apis文件夹，然后在里面新建一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。
http.js文件：
1
2
3
4
5
6
7
8
9
|
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios;
Vue.prototype.$store = store;
axios.defaults.baseURL = '/'
|
2.3 设置请求时间
http.js文件：
1
2
3
4
| ...
axios.defaults.timeout = 10000;
|
2.4 post请求头设置
post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8
http.js文件：
1
| axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
|
2.5 请求拦截器
在发送请求前可以进行一个请求的拦截，为什么要拦截呢？拦截请求是用来做什么的呢？
比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。
http.js文件：
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
| ...
import store from '@/store/index'
...
axios.interceptors.request.use(
config => {
console.log('请求拦截器config' + config.headers.Authorization);
const token = store.state.token;
console.log('store.state' + store.state);
console.log('token:' + token);
token && (config.headers.Authorization = token);
return config;
},
error => {
console.log('error:' + error);
return Promise.error(error);
}
)
|
token：一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。
那么每个请求都携带token，那么如果一个页面不需要用户登录就可以访问的怎么办呢？其实，前端的请求可以携带token，但是后台可以选择不接收的。
2.6 响应拦截器
http.js文件：
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
| ...
axios.interceptors.response.use(
response => {
console.log('响应拦截器' + response.status);
if (response.status === 200) {
console.log('响应拦截器' + response.status);
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
console.log('响应拦截器error::' + error);
console.log('响应拦截器码: ' + error.response.status);
if (error.response.status) {
switch (error.response.status) {
case 401: {
console.log('响应拦截器error::401');
console.log('401::' + router);
console.log('401::' + router.currentRoute.fullPath);
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}
break;
case 403:
localStorage.removeItem('token');
store.commit('loginSuccess', null);
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
case 404:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
default:
}
return Promise.reject(error.response);
}
}
)
|
响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。
例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。
2.7 封装get方法和post方法
常用的ajax请求方法有get、post、put等方法，axios对应的也有很多类似的方法。为了简化代码，还是要对其进行一个简单的封装。下面主要封装两个方法：get和post。
通过定义一个get函数，get函数有两个参数，第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，当axios其请求成功时resolve服务器返回 值，请求失败时reject错误值。最后通过export抛出get函数。
http.js文件：
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
| ...
const Domain = '';
export function get(action, params) {
return new Promise((resolve, reject) => {
const url = Domain + action;
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
});
}
|
原理同get基本一样，但是要注意的是，post方法必须要使用对提交从参数对象进行序列化的操作，所以我们可以通过node的qs模块来序列化我们的参数。这个很重要，如果没有序列化操作，后台是拿不到提交的数据的。
可以通过import QS from 'qs'引入qs模块。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| ...
export function post(action, params) {
return new Promise((resolve, reject) => {
const url = Domain + action;
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
|
axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是，get的第二个参数是一个{}，然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要留意哦！
封装完成啦！
3.接口统一管理
整齐的api就像电路板一样，即使再复杂也能很清晰整个线路。文件中存放所有的api接口。
api.js文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import { get, post } from '@/request/http'
export default {
postData(action, params){
return post(action, params)
},
getData(action, params){
return get(action, params)
}
}
|
任意vue文件：
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
| <template>
<div id="#">
</template>
<script>
import Vue from 'vue';
import api from '@/api/api.js';
Vue.prototype.$api = api;
export default {
name:"#",
data(){
return {
value1:'',
value2:''
}
},
methods:{
functiondemo(arg){
// 序列化数据
let param = new URLSearchParams();
param.append("key1", this.value1);
param.append("key2", this.value2);
this.$api.postData('/url', param)
.then(response => {
...
})
.catch(err => {
console.log(err);
});
}
}
}
</script>
<style>
...
</style>
|
其他的api接口，就在api.js中继续往下面扩展就可以了！
并为每个接口写好注释！
api接口管理的一个好处就是，我们把api统一集中起来，如果后期需要修改接口，我们就直接在api.js中找到对应的修改就好了，而不用去每一个页面查找我们的接口然后再修改会很麻烦。关键是，万一修改的量比较大，就会很麻烦。还有就是如果直接在我们的业务代码修改接口，一不小心还容易动到我们的业务代码造成不必要的麻烦。
