axios请求拦截器 (一般一个回调)
是什么:在真正发请求之前执行的一个回调函数
作用: 对所有的请求做统一的处理追加请求头 、追加参数、界面loading提示等
axios响应拦截器
是什么:得到响应之后执行的一组回调函数
作用: 若请求成功 对成功的数据进行处理 ;若请求失败 对失败进行 统一的操作
注意:可以指定 多个请求拦截器 后指定的先执行
<script type="text/javascript">
const btn = document.getElementById('btn')
axios.interceptors.request.use(function (config) {
if (Date.now() % 2 === 0) {
config.headers.token = 'tokentokentoken'
}
return config
})
axios.interceptors.response.use(
response =>{
console.log('响应拦截器成功的回调执行了',response);
return response.data
},
error =>{
console.log('响应拦截器 失败的回调执行了');
alert(error)
return new Promise(()=>{
})
}
)
btn.onclick = async() => {
const result = await axios.get('http://localhost:3000/status')
console.log(result);
}
</script>
取消请求: const { CancelToken } = axios //CancelToken 能为一次请求 “打一个标识”
<script type="text/javascript">
const btn = document.getElementById('btn')
const btn1 = document.getElementById('btn1')
const { CancelToken } = axios
let cancel
btn.onclick = async () => {
axios({
url: 'http://localhost:3000/status/test1?delay=3000',
cancelToken: new CancelToken(function (c) {
cancel = c
})
}).then(
response => {
console.log('成功了', response.data);
},
error => {
console.log('失败了', error);
}
)
}
btn1.onclick = () => {
cancel()
}
</script>