阻截器
web向后端传输数据的两种格式json和urlencoded
import qs from ‘qs’
data: qs.stringify(data)
因此需要判断到底传入的是什么类型的数据
因此就需要用到axios阻截器可以修改一下类型
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
这是请求阻截器,在请求发生之前作一些操作例如可以是所有的json转换为urlencoded。
例如把data{
username:“tom”,
password:“123456”
} 转换为 username=tom&password=123456形式
axios.interceptors.request.use(function (config) {
// Do something before request is sent
const {data,method} = config;
if(method.toLowerCase() === 'post' && typeof data === 'object'){
config.data = qs.stringify(data);
}
return config;
})
顾名思义还有一个响应拦截器
axios.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response;
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
});
可以过滤掉一些从后端返回的信息,还可以统一处理请求错误的信息
return new Promise(() => {});
axios取消请求
const CancelToken = axios.CancelToken
let cancel
axios.defaults.baseURL = 'http://localhost:3000'
axios.get('/comments', {
cancelToken: new CancelToken((c) => {
//保存取消到外部,用于取消请求
cancel = c;
})
}).then((result) => {
console.log(result)
}).catch((err) => {
console.log(err)
});
cancel('已取消')
这个如果我们要实现一种效果 就是 两个按钮 点击一个按钮会发一次请求,如果点了一个按钮 ,在响应返回前点下另一个按钮,上一个请求取消,只执行当前的请求。
const CancelToken = axios.CancelToken
let cancel
axios.defaults.baseURL = 'http://localhost:3000'
testReq1 = () => {
cancel && cancel('请求已取消')
axios.get('/comments', {
cancelToken: new CancelToken((c) => {
//保存取消到外部,用于取消请求
cancel = c;
})
}).then((result) => {
cancel = null
console.log(result)
}).catch((err) => {
if (axios.isCancel(err)) {
console.log('request cancel',err)
} else {
cancel = null
console.log('request err ',err)
}
});
}
testReq2 = () => {
cancel && cancel('请求已取消')
axios.get('/comments', {
cancelToken: new CancelToken((c) => {
//保存取消到外部,用于取消请求
cancel = c;
})
}).then((result) => {
cancel = null
console.log(result)
}).catch((err) => {
if (axios.isCancel(err)) {
console.log('request cancel',err)
} else {
cancel = null
console.log('request err ',err)
}
});
}
testCancel = () => {
cancel && cancel('请求已取消')
}
这个我们可以看出 代码大量相似,这个时候 就可以用到拦截器。
在请求前 把指定的cancel清除,在相应拦截器中
const CancelToken = axios.CancelToken
let cancel
axios.defaults.baseURL = 'http://localhost:3000'
axios.interceptors.request.use(config => {
if (typeof cancel == 'function') {
cancel('请求已取消')
}
// 配置当前的cancelToken 保存cancel
config.cancelToken = new CancelToken((c) => {
cancel = c
})
return config
})
axios.interceptors.response.use(res => {
console.log(typeof res)
cancel = null
return res
}, err => {
if (axios.isCancel(err)) {
console.log( 'request cancel ', err.message)
return new Promise(() =>{})
}
cancel = null
return Promise.reject(err)
})
testReq1 = () => {
axios.get('/comments').then((result) => {
console.log(result)
}).catch((err) => {
console.log('request cancel', err)
});
}
testReq2 = () => {
axios.get('/comments').then((result) => {
console.log(result)
}).catch((err) => {
console.log('request cancel', err)
});
}
testCancel = () => {
cancel && cancel('请求已取消')
}