axios使用总结
安装
推荐 yarn
或者 使用 npm
使用
可以像jQuery中的ajax那样使用
1
2
3
4
5
6
7
8
9
| $.ajax({
url: '/api/userlist'
methods: 'get',
dataType: 'json',
success: funciton() {
}
})
|
但是不需要采用jQuery中的回调，避免产生地狱回调的问题，所以我们采用 ES6 的 promise 写法。
如下
1
2
3
4
5
6
7
8
| axios({
method:'get',
url:'/api/userlist',
responseType:'json'
})
.then(function(response) {
});
|
请求方法的别名
如果你发送的是 get 类型的请求数据，可以忽略 methods 参数。
为了探索新的大陆，当然也是为了简（tou）洁（lan），来尝试一下新的方法。
axios起了别名，可以更加方便的调用请求方法。
话说，最常用的还是这两个。
axios.get(url[, config])
axios.post(url[, data[, config]])
1
2
3
4
| axios.get('/api/userlist')
.then(res=> {
})
|
全局默认值 baseURL
在一个项目中，请求不可能只有几个，而每个请求大多都是基于同一个地址，那么，就可以设置根URL。
优点显而易见，可以避免更换服务器而导致所有的请求地址都要改变，也可以避免没必要的同时出现相同的字符串，只需写后面的接口地址即可。
1
2
|
axios.defaults.baseURL = 'https://www.api.com';
|
1
2
3
4
5
6
|
axios.get('/api/userlist')
.then(res=> {
})
|
拦截器
在很多场景中，用户登录后，需要将用户的token一起发送给后端，而每次请求都设置一边请求头，显然不符合实际。axios 提供了拦截器，发送前和数据返回后都可以做下处理然后继续发给服务器或者交给页面处理。
1
2
3
4
5
6
7
8
|
axios.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
|
1
2
3
4
5
6
7
8
|
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});
|
同时这里也可以统一处理错误情况，提高了开发效率。
在Vue、React中使用axios
Vue
假设已经使用 vue-cli 脚手架搭建出基本框架，那么加下来就可以直接挂在Vue的原型上，这样在每个页面都可以调用 axios
/src/main.js
1
2
3
4
5
6
7
|
import axios from 'axios'
Vue.prototype.$http = axios
|
在其他组件调用就可以这样
/pages/home/home.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <template>
<div>
<div>{{userinfo}}</div>
</div>
</template>
<script>
export default {
name: 'home',
data() {
return {
userinfo: null
}
},
methods: {
getUserInfo() {
this.$http.get('/api/userinfo').then(res => {
this.userinfo = res.data
})
}
},
}
</script>
|
React
React用法同Vue，还是采用脚手架搭建，然后在/src/index.js将axios绑定到React上
/src/index.js
1
2
3
4
|
import axios from './config/axiosConfig';
React.Component.prototype.axios = axios;
|
/src/config/axiosConfig
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
| import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:5000';
axios.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
response = response.data;
return response;
}, function (error) {
return Promise.reject(error);
});
export default axios;
|
组件中的调用
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
| import React from 'react';
export default class table extends React.Component {
state = {
dataSource: null
}
componentDidMount() {
this.getDataSource();
}
getDataSource = () => {
this.axios.get('/api/userinfo')
.then((res) => {
this.setState({
dataSource: res.data
})
});
}
render() {
const dataSource = this.state.dataSource;
return (
<div>
<div>{dataSource}</div>
</div>
);
}
}
|
最后
现在的前端工程大都已经将接口统一管理了，只会在页面调用接口，然后在页面写处理的逻辑。这篇文章知识提供一个思路。