axios请求超时提示（axios 取消请求:CancelToken）
目录
示例代码：
步骤操作：
优化取消请求（细化错误问题）：
示例代码：
axios 请求拦截器中使用取消请求：
示例代码：
axios 批量发送请求：
注意：此方法（CancelToken） ，官方已经不推荐 ，推荐去看官网的方法
示例代码：
<body> <button id="btn1">点我获取测试数据</button> <button id="btn2">取消请求</button> <script> const btn1 = document.getElementById(btn1); const btn2 = document.getElementById(btn2); const {CancelToken} = axios; //CancelToken能为一次请求‘打标识’ let cancel; btn1.onclick = async () => { axios({ url:http://localhost:5000/test1?delay=3000, cancelToken: new CancelToken((c)=>{ //c是一个函数 ，调用c就可以关闭本次请求 cancel = c; }) }).then( response =>{console.log(成功了,response);}, error =>{console.log(失败了,error);} ) } btn2.onclick = () =>{ cancel(); } </script> </body>步骤操作：
1.首先定义一个 CancelToken 来接收 axios 中 CancelToken 主要是为了’打标识
const {CancelToken} = axios; //CancelToken能为一次请求‘打标识’2.然后定义一个 cancel 变量
let cancel;3.在 axios 对象中配置 cancelToken：
cancelToken: new CancelToken((c)=>{ //c是一个函数 ，调用c就可以关闭本次请求 cancel 的缩写 cancel = c;//赋值给外面的变量cancel 提升c的作用域？ })4.最后绑定在某个事件发生后想取消请求时调用：
//笔记中所写的事件为点击事件 任何事件都可以 btn2.onclick = () =>{ cancel(); }优化取消请求（细化错误问题）：
说明：点击取消请求时 ，axios也会去失败的回调 ，但这不是服务器的错误导致的 ，是用户自身不需要本次请求 ，所以需要对于错误进行划分 。以及如果用户反复点击 ，会发出多次请求 ，单只需要一次请求 。
示例代码：
<body> <button id="btn1">点我获取测试数据</button> <button id="btn2">取消请求</button> <script> const btn1 = document.getElementById(btn1); const btn2 = document.getElementById(btn2); const { CancelToken, isCancel } = axios //CancelToken能为一次请求‘打标识’ let cancel; btn1.onclick = async () => { if(cancel) cancel();//避免多次反复请求 axios({ url: http://localhost:5000/test1?delay=3000, cancelToken: new CancelToken((c) => { //c是一个函数 ，调用c就可以关闭本次请求 cancel = c; }) }).then( response => { console.log(成功了, response); }, error => { if (isCancel(error)) { //如果进入判断 ，证明：是用户取消了请求 console.log(用户取消了请求 ，原因是, error.message); } else { console.log(失败了, error); } } ) } btn2.onclick = () => { cancel("任性 ，我就是不想要了"); } </script> </body>解释：cancel 函数可在括号中添加说明 ，在进入失败的回调时进行判断是服务器端发出的 ，还是用户自己取消的 。
axios 请求拦截器中使用取消请求：
示例代码：
<body> <button id="btn1">点我获取测试数据</button> <button id="btn2">取消请求</button> <script> const btn1 = document.getElementById(btn1); const btn2 = document.getElementById(btn2); const { CancelToken, isCancel } = axios //CancelToken能为一次请求‘打标识’ let cancel; //请求拦截器 axios.interceptors.request.use(config => { if(cancel) cancel(取消了); config.cancelToken =new CancelToken((c)=> cancel = c); //c是一个函数 ，调用c就可以关闭本次请求 return config; }); //响应拦截器 axios.interceptors.response.use(response => { return response.data; },error => { if (isCancel(error)) { //如果进入判断 ，证明：是用户取消了请求 console.log(用户取消了请求 ，原因是, error.message); } else { console.log(失败了, error); } return new Promise(()=>{}); }); //进行简化 btn1.onclick = async () => { const result = await axios.get(http://localhost:5000/test1?delay=3000); console.log(result); } btn2.onclick = () => { cancel("我不想要了"); } </script> </body>axios 批量发送请求：
使用了axios.all( ) 的API ，括号中为数组 ，其中写需要并发的请求 。
<body> <button id="btn1">点我获取测试数据</button> <script> const btn1 = document.getElementById(btn1); btn1.onclick = async () => { axios.all([ axios.get(http://localhost:5000/test1), axios.get(http://localhost:5000/test2), axios.get(http://localhost:5000/test3), ]).then( response =>{console.log(response);}, error =>{console.log(error);} ) }; </script> </body>解释：Axios.all( ) 基于 promise.all( ) ，所有的都是成功的回调才会返回数据 ，如果有一个失败的回调 ，就会走错误信息 。此方法会按顺序打印 并发的三个请求的数据 ，并且如果用了延迟请求也会是原本的顺序 ，这是 axios 封装好的 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！