Axios取消请求

伤心客  金牌会员 | 2024-8-13 14:33:20 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 796|帖子 796|积分 2388

1. 问题场景

有两个tab：tab A 和tab B。如今点击A会发送A请求，点击B会发送B请求。如果用户点击A之后快速点击B，A请求比B请求先返回，那么页面就会错误渲染A。AB请求返回的数据效果完全一致，只是内容不同，在这种情况下，如何表现B请求的数据而不是A请求的数据。
本地服务器预备
  1. const http = require('http')
  2. const url = require('url')
  4. const server = http.createServer()
  6. server.on('request', (req, res) => {
  7.     console.log('Someone visit our web server')
  9.     const method = req.method
  10.     const URL = req.url
  11.     console.log(`Your request url is ${URL}, and request method is ${method}`)
  13.     if (req.method === 'OPTIONS') {
  14.         console.log('OPTIONS')
  15.         res.writeHead(200, {
  16.           'Access-Control-Allow-Origin': 'http://127.0.0.1:8080',
  17.           'Access-Control-Allow-Headers': 'Content-Type, Authorization, Content-Length, X-Requested-With, x-custom-header',
  18.           'Access-Control-Allow-Methods': 'PUT, POST, GET, DELETE, OPTIONS',
  19.           'Access-Control-Allow-Credentials': 'true'
  20.         })
  21.         res.end()
  22.         return // 确保在 OPTIONS 请求中及时返回，不再继续处理请求
  23.     }
  25.     if (method === 'GET') {
  26.         const { query } = url.parse(URL)
  27.         const params = {}
  28.         if (query.includes('&')) {
  29.             query.split('&').forEach(item => {
  30.                 const queryPair = item.split('=')
  31.                 params[queryPair[0]] = queryPair[1]
  32.             })
  33.         } else {
  34.             const queryPair = query.split('=')
  35.             params[queryPair[0]] = queryPair[1]
  36.         }
  37.         const tab = params['tab']
  39.         // 设置跨域响应头
  40.         res.writeHead(200, {
  41.             'Content-Type': 'application/json',
  42.             'Access-Control-Allow-Origin': 'http://127.0.0.1:8080',
  43.             'Access-Control-Allow-Headers': 'Content-Type, Authorization, Content-Length, X-Requested-With',
  44.             'Access-Control-Allow-Methods': 'PUT, POST, GET, DELETE, OPTIONS',
  45.             'Access-Control-Allow-Credentials': 'true' // 添加此行
  46.         })
  48.         // 把内容发送给客户端
  49.         res.end(JSON.stringify(`Now it is the content of tab ${tab}`))
  50.     }
  51. })
  54. server.listen(8081, () => {
  55.     console.log('server running at http://127.0.0.1:3000')
  56. })
复制代码
HTML文件预备
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>cancelDemo</title>
  7.     <style>
  8.         .box {
  9.             position: relative;
  10.             margin: 0 auto;
  11.             margin-top: 60px;
  12.             width: 400px;
  13.             height: 540px;
  14.             border: 2px solid #000;
  15.             border-radius: 10px;
  16.         }
  18.         .box .content {
  19.             margin: 20px;
  20.             width: 360px;
  21.             height: 400px;
  22.             border: 2px solid #efefef;
  23.             border-radius: 10px;
  24.             text-align: center;
  25.         }
  27.         .box .tab {
  28.             position: absolute;
  29.             display: flex;
  30.             justify-content: space-evenly;
  31.             align-items: center;
  32.             bottom: 0;
  33.             width: 100%;
  34.             height: 60px;
  35.             border-top: 2px solid #9a9da3;
  36.             border-radius: 5px;
  37.         }
  39.         .box .tab .btn {
  40.             padding: 10px 20px;
  41.             height: 40px;
  42.             background-color: #4479e1;
  43.             box-sizing: border-box;
  44.             border-radius: 10px;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <div class="box">
  50.         <div class="content">Now it is the content of tab 1</div>
  51.         <div class="tab">
  52.             <div class="btn" data-index="1">tab 1 </div>
  53.             <div class="btn" data-index="2">tab 2 </div>
  54.             <div class="btn" data-index="3">tab 3 </div>
  55.         </div>
  56.     </div>
  58.     <!-- <script src="./index.js" type="module"></script> -->
  59.     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  60.     <script type="module" src="./index.js"></script>
  61. </body>
  62. </html>
复制代码
index.js文件预备
  1. const tab = document.querySelector('.tab')
  2. tab.addEventListener('click', e => {
  3.   if (e.target.className !== 'btn') return
  4.   const index = e.target.dataset.index
  5.   axios({
  6.     method: 'GET',
  7.     url: `http://127.0.0.1:3000/index?tab=${index}`
  8.   }).then(res => {
  9.     document.querySelector('.content').innerHTML = res.data
  10.   })
  11. })
复制代码
2. Axios方法

Axios官方提供了两种取消请求的方法：

  • 使用 cancel token 取消一个请求（该方法的cancel token API 在 v0.22.0 中已经被废弃，以是不推荐使用）
    使用 CancelToken.source 工厂方法创建一个 cancel token
    1. const CancelToken = axios.CancelToken;
    2. const source = CancelToken.source();
    4. axios.get('/user/12345', {
    5.   cancelToken: source.token
    6. }).catch(function (thrown) {
    7.   if (axios.isCancel(thrown)) {
    8.     console.log('Request canceled', thrown.message);
    9.   } else {
    10.     // 处理错误
    11.   }
    12. });
    14. axios.post('/user/12345', {
    15.   name: 'new name'
    16. }, {
    17.   cancelToken: source.token
    18. })
    20. // 取消请求（message 参数是可选的）
    21. source.cancel('Operation canceled by the user.');
    复制代码
    也可以通过通报一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token
    1. const CancelToken = axios.CancelToken;
    2. let cancel;
    4. axios.get('/user/12345', {
    5.   cancelToken: new CancelToken(function executor(c) {
    6.     // executor 函数接收一个 cancel 函数作为参数
    7.     cancel = c;
    8.   })
    9. });
    11. // 取消请求
    12. cancel();
    复制代码
  • Axios 支持以 fetch API 方式 —— AbortController 取消请求
    1. const controller = new AbortController();
    3. axios.get('/foo/bar', {
    4.    signal: controller.signal
    5. }).then(function(response) {
    6.    //...
    7. });
    8. // 取消请求
    9. controller.abort()
    复制代码
3. 取消请求实战

先对axios进行二次封装，这里简单地设置baseURL和timeout。下面是request中的index.js
  1. // request/index.js
  2. export const server = axios.create({
  3.     baseURL: 'http://127.0.0.1:8081/',
  4.     timeout: 3000,
  5.     headers: {
  6.         'X-Custom-Header': 'foobar',
  7.     }
  8. })
复制代码
再对获取tab信息的api进行封装：
  1. // request/tab.js
  2. import {server} from './index.js'
  4. // 切换tab的请求
  5. export const getTabContentAPI = async (index, cfg) => {
  6.     cfg = cfg || {}
  7.     return await server.get(`index?tab=${index}`, cfg)
  8. }
复制代码
对tab请求增加取消功能时，必要在调用api时，加上cancelToken选项
  1. import { getTabContentAPI } from "./request/tab.js"
  3. const tab = document.querySelector('.tab')
  5. const CancelToken = axios.CancelToken
  6. let cancelFn
  8. const getTabContent = async index => {
  9.   if (index == 3) cancelFn(`取消了tab${index}的上一个请求`)
  10.   const res = await getTabContentAPI(index, {
  11.     cancelToken:  new CancelToken(c => cancelFn = c)
  12.   })
  13.   return res
  14. }
  16. tab.addEventListener('click', async e => {
  17.   if (e.target.className !== 'btn') return
  18.   const index = e.target.dataset.index
  20.   const res = await getTabContent(index)
  21.   document.querySelector('.content').innerHTML = res.data
  23. })
复制代码
但如许只能做到取消tab3的前一个请求，无法灵活地做到取消每一个tab的前一个请求。同时如果直接使用 cancelFn(取消了tab${index}的上一个请求) ，就会导致首次发送请求时， cancelFn 还不是function。以是我们可以用一个数组来生存cancelFn，同时使用try catch
  1. // index.js
  2. import { getTabContentAPI } from "./request/tab.js"
  4. const tab = document.querySelector('.tab')
  6. const CancelToken = axios.CancelToken
  7. const isCancel = axios.isCancel
  9. let cancelFnArr = []
  11. const getTabContent = async index => {
  12.   if (cancelFnArr.length > 0) {
  13.     cancelFnArr.pop()(`取消了tab${index}的上一个请求`)
  14.   }
  15.   const res = await getTabContentAPI(index, {
  16.     cancelToken:  new CancelToken(c => cancelFnArr.push(c))
  17.   })
  18.   return res
  19. }
  21. tab.addEventListener('click', async e => {
  22.   if (e.target.className !== 'btn') return
  23.   const index = e.target.dataset.index
  25.   try {
  26.     const res = await getTabContent(index)
  27.     document.querySelector('.content').innerHTML = res.data
  28.   } catch(err) {
  29.     if (isCancel(err)) {
  30.       console.log('请求被取消', err.message)
  31.     } else {
  32.       console.log('请求出错', err.message)
  33.     }
  34.   }
  35.   
  36.   
  37. })
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

伤心客

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表