基于axios的请求拦截
- 使用场景:连续发次多个异步请求,最终拿到的请求的结果很大程度上不是最后一次发起的请求结果
所以我们需要每次发起请求的时候,将之前的请求给停止掉,从而保证我们拿到的是最后一次请求的结果
两者的区别,就是在传参的时候的写法不一样而已
post请求
let source = '' // 创建一个空的source对象
function getData() {
if(source) source.cancel() // 停止之前的请求
// 这里初始化source对象
source = axios.cancelToken.source()
// 发起新的请求
axios.get('请求地址',
{
name: 'xxx',
age: '22',
},
// 其实就这里的格式不一样
{
cancelToken: this.source.token // 用于拦截的对象
})
.then(result => {
// 处理请求成功的结果
console.log('请求结果:' + result.data)
})
.catch(result => {
// 如果调用了cancel方法,那么这里的result就是cancel传入的信息
// 或则处理错误的逻辑
})
}
get请求
let source = '' // 创建一个空的source对象
function getData() {
if(source) source.cancel() // 停止之前的请求
// 这里初始化source对象
source = axios.cancelToken.source()
// 发起新的请求
axios.get('请求地址',
{
params: {
name: 'xxx',
age: '22'
},
cancelToken: this.source.token // 用于拦截的对象
})
.then(result => {
// 处理请求成功的结果
console.log('请求结果:' + result.data)
})
.catch(result => {
// 如果调用了cancel方法,那么这里的result就是cancel传入的信息
// 或则处理错误的逻辑
})
}