常用的请求

  1. XMLHTTPRequest
  2. fetch
  3. axios
  4. swr
  5. umi-requeist
  6. react-query

js 发起 http请求常用的方法
https://www.freecodecamp.org/chinese/news/the-most-popular-ways-to-make-an-http-request-in-javascript/
axios实现并发请求 https://apifox.com/apiskills/axios-all-requests/

请求数据

单个请求
并发请求，同时发送多个请求，并在所有请求完成后进行处理
依赖查询
延迟查询
嵌套查询
轮询

并发请求

  • Promise.all
  • Axios.all

并发请求时，要确保请求之间相互独立且不会互相干扰，否则可能会导致数据混乱或请求失败
并发请求可能会增加服务器的负担，请谨慎使用并在必要时使用节流或防抖来限制请求频率

  1. import axios from 'axios';
  3. const request1 = axios.get('/api/resource1');
  4. const request2 = axios.get('/api/resource2');
  6. // Promise 返回数组
  7. Promise
  8.   .all([request1, request2])
  9.   .then(res => res)
  11. // axios
  12. axios
  13.   .all([request1, request2])
  14.   .then(axios.spread((response1, response2) => {
  15.     // 处理 response1 和 response2
  16.   }))
  17.   .catch((error) => {
  18.     // 处理错误
  19.   });
  21. // async
  22. fetchData()
  23. async function fetchData() {
  24.   try {
  25.     const request1 = axios.get('/api/resource1');
  26.         const request2 = axios.get('/api/resource2');
  27.     // 处理 response1 和 response2
  28.   } catch (error) {
  29.     // 处理错误
  30.   }
  31. }

axios.all

  1. axios.all = promises => Promise.all(promises);
  3. axios.spread = callback => {
  4.   return (array) => callback.appaly(null, array); 
  5. }
  7. // apply 参数是数组，call 参数是单个序列

更新数据

  1. 表单 Submit提交时，按钮 disable 禁用，防止重复提交
  2. 实时搜索输入框做「防抖」处理，延迟发起搜索请求
  3. 编辑提交修改后，先「乐观更新」本地数据，再发起请求，而当服务端更新失败时 revert 本地数据变更
  4. 实时性要求高的数据定时 1 分钟「轮询」一次，同时在切换 Chrome Tab 和网络重连时都做一次更新

Swr， stale while revalidate HTTP 缓存失效策略
首先从缓存中返回数据（过期的），同时发送 fetch 请求（重新验证），最后得到最新数据
https://www.leezhian.com/web/base/cache-control-swr