一、axios的概念
在前端项目开发中,开发人员免不了要调用后端的数据接口进行数据交互。随着技术的不断发展,调用接口的方式也是在不断的进步,从原生的ajax到现在更加流行的axios,项目的开发也变得越来越高效与快捷。 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,我们在项目中会经常用axios请求接口来获取数据。
二、axios的使用
2.1 get和 delete请求传递参数
通过传统的url 以 ? 的形式传递参数 restful 形式传递参数 通过params 形式传递参数
2.2 post 和 put 请求传递参数
通过选项传递参数 通过 URLSearchParams 传递参数
2.3 axios全局配置
在开发中,我们在使用同一个URL地址时不会总是反复调用,因此我们会将共同地址封装出来。有时还会将axios封装成一个实例,实现高内聚,低耦合的开发思想。
2.4 拦截器
请求拦截器
- 请求拦截器的作用是在请求发送前进行一些操作
- 例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易
响应拦截器
- 响应拦截器的作用是在接收到响应后进行一些操作
- 例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页
三、代码示例
axios全局配置
# 配置公共的请求头
axios.defaults.baseURL = 'https://api.example.com';
# 配置 超时时间
axios.defaults.timeout = 2500;
# 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
增删改查
# 1. 发送get 请求
axios.get('http://localhost:3000/adata').then(function(ret){
# 拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面
console.log(ret)
})
# 2. get 请求传递参数
# 2.1 通过传统的url 以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
console.log(ret.data)
})
# 2.2 restful 形式传递参数
axios.get('http://localhost:3000/axios/123').then(function(ret){
console.log(ret.data)
})
# 2.3 通过params 形式传递参数
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret){
console.log(ret.data)
})
#3 axios delete 请求传参 传参的形式和 get 请求一样
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret){
console.log(ret.data)
})
# 4 axios 的 post 请求
# 4.1 通过选项传递参数
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
# 4.2 通过 URLSearchParams 传递参数
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
console.log(ret.data)
})
#5 axios put 请求传参 和 post 请求一样
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
在开发中,在请求登录时,会生成一个身份令牌token,任何API接口的使用的都需要这个token,那么我们就可以将此token暂时保存在window.sessionStorage中,当需要token时再使用即可。
axios拦截器
# 1. 请求拦截器
axios.interceptors.request.use(function(config) {
console.log(config.url)
# 1.1 任何请求都会经过这一步 在发送请求之前做些什么
config.headers.mytoken = 'nihao';
# 1.2 这里一定要return 否则配置不成功
return config;
}, function(err){
#1.3 对请求错误做点什么
console.log(err)
})
#2. 响应拦截器
axios.interceptors.response.use(function(res) {
#2.1 在接收响应做些什么
var data = res.data;
return data;
}, function(err){
#2.2 对响应错误做点什么
console.log(err)
})
四、总结
在实际开发中,可以尝试着将关于axios的配置封装成一个js文件,会更便于开发人员进行项目的维护。而且在调用接口时,一定要仔细阅读接口文档,不能因为一时疏忽而影响开发效率。
|