axios
axios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库,常用于Ajax请求。
安装axios
npm install axios --save
axios的请求方式
- axios(config)
- axios.request(config)
- axios.get(url [, config])
- axios.delete(url [, config])
- axios.head(url [, config])
- axios.post(url [, data [,config]])
- axios.put(url [, data [, config]])
- axios.patch(url [, data [, config]])
直接发起GET请求:
import axios from 'axios'
//1. 没有请求参数
axios.get('http://123.207.32.32:8000/home/multidata').then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
//2.有参数
axios.get('http://123.207.32.32:8000/home/data?type=sell&page=3',
{params: {type: 'sell', page: 1}})
.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
基于Promise,可以执行多个并发请求:
- 使用axios.all([])可以放入多个请求的数组
- axios.all([])返回的是一个数组,使用axios.spread可以将数组解构
//发送并发请求
axios.all([
axios({
url: 'http://123.207.32.32:8000/home/multidata'
}),
axios({
url: 'http://123.207.32.32:8000/home/multidata'
})
]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log('`````````');
console.log(res2);
}))
全局配置
在上面的示例中,我们的BaseRUL是固定的
- 事实上,在开发中可能很多参数都是固定的
- 这个时候我们可以进行一些抽取,也可以利用axios的全局配置
常见的配置选项
-
请求地址:
url:’/user -
请求类型:
method:‘get’ -
请求跟路径:
vaseURL:‘http://www.mt.com/api’ -
请求前的数据处理:
transformRequest:[function(data){}] -
请求后的数据处理:
transformResponse:[function(data){}] -
自定义的请求头
headers:{‘x-Requested-With’:‘XMLHttpRequest’} -
RUL查询对象
params: {id: 12}
axios实例
当我们从axios模块中导入对象时,使用的实例是默认实例。当给实例设置一些默认配置时,这些配置就被固定下来了。但是后续开发中,某些配置可能会不太一样。比如某些请求需要使用特定的baseRUL或者timeout或者coutent-Type等。这个时候,我们就可以创建新的实例,并且传入属于该实例的配置信息。
拦截器
axios提供了拦截器,用于我们在发送每次请求或者得到响应后,进行对应的处理。
拦截器的作用
错误拦截:
请求拦截中错误拦截很少,通常都是配置相关的拦截:
- 可能的错误比如请求超时,可以将页面跳转到一个错误页面中。
响应拦截:
响应的成功拦截中 ,主要是对数据进行过滤:
响应的失败拦截中,可以根据status判断报错的错误码,跳转到不同的错误提示页面