跳到主要内容

网络请求

并行请求​

  • 简单来说就是同一个接口，我们需要维护多个请求状态

并行请求有几个特点

  • 删除 n 个不同的用户，则需要维护 n 个请求状态。
  • 多次删除同一个用户，则只需要维护最后一个请求。

解决：

  • 可对请求进行分类。相同分类的请求，只会维护一份状态。不同分类的请求，则会维护多份状态

防抖 & 节流​

  • 通常在边输入边搜索的场景中，我们会用到防抖功能，以节省不必要的网络请求。

屏幕聚焦重新请求​

  • 它可以保证多个 tab 间数据的同步性。也可以解决长间隔之后重新打开网站的数据新鲜度问题。

轮询​

  • 对于需要保持新鲜度的数据，我们通常需要不断发起网络请求以更新数据

缓存 & SWR & 预加载​

swr 是 stale-while-revalidate 的简称，最主要的能力是：我们在发起网络请求时，会优先返回之前缓存的数据，然后在背后发起新的网络请求，最终用新的请求结果重新触发组件渲染。swr 特性在特定场景，对用户非常友好

在 SWR 场景下，我们会对接口数据进行缓存，当下次请求该接口时，我们会先返回缓存的数据，同时，在背后发起新的网络请求，待新数据拿到后，重新触发渲染。

简单请求/复杂请求​

  • 1、对于简单请求，不会触发options请求
  • 2、满足以下条件为简单请求
    • 只能使用 GET、HEAD、POST 这三种 HTTP 方法之一。其他请求方法为复杂请求
    • 请求的头只能是以下几种常见的
      • Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type（仅限于 application/x-www-form-urlencoded、multipart/form-data、text/plain）
      • 注意 Content-Type请求体类型 为 application/json 是复杂请求

说说options请求​

options预检请求只发生在 非简单请求（也就是复杂请求）

  • 复杂请求的cors请求，会在通信之前，增加一次HTTP查询请求，称为预检请求

  • 浏览器通过options方法发起一个预检请求，检测服务器是否允许该请求

  • 发生跨域请求的时候，浏览器发起options预检请求到服务端，询问服务端是否允许该跨域请求

  • 预检请求的结果可以被缓存

  • 获取当前URL所支持的方法，若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

为什么谷歌浏览器存在options请求​

  • 为了支持跨域资源共享（CORS）机制而引入的

Referer理解​

  • Referer 请求头，表示当前页面是通过来源页面的链接进去的，可以告诉服务器该网页时从哪个页面链接过来的
  • 服务端一般使用 Referer 请求头识别访问来源

一般来说，页面发起的 http 请求，referer字段的配置，通过前端代码是无法干预的，是由浏览器自主设置添加的，当然了，如果不想携带referer字段，可在浏览器的设置中关掉即可

作用​

  • 防盗链
    • 将这个http请求发给服务器后，如果服务器要求必须是某个地址或者某几个地址才能访问，而你发送的referer不符合他的要求，就会拦截或者跳转到他要求的地址，然后再通过这个地址进行访问
  • 防止恶意请求
    • 必须规定指向某一个来源地址才能请求接口
  • 埋点分析
    • 埋点分析有一种情况就是 用于追溯用户的完整访问路径，可以通过Referer来分析用户的来源地址和要访问的链路
  • 错误日志排查
    • 定位错误，根据接口的来源地址

请求竞态问题​

请求竞态在项目中，比较常见的一个问题，在异步请求或者并发请求的时候，需要考虑的问题

  • 请求竞态：比如多个请求去获取数据的时候，由于网络问题或者其他的不确定原因，可能会导致先发出去的请求不一定先响应，导致数据的不一致性，资源争夺问题

场景：

  • 1、有一个分页列表，快速地切换第二页，第三页；先后请求 data2 与 data3，分页器显示当前在第三页，并且进入 loading；但由于网络的不确定性，先发出的请求不一定先响应，所以有可能 data3 比 data2 先返回；在 data2 最终返回后，分页器指示当前在第三页，但展示的是第二页的数据。

  • 2、输入框搜索

    • 通常输入框搜索，处理的方案 很多人第一时间会想到防抖，防抖就是 多次触发操作，只在最后一次执行，这种只是性能问题，避免多次请求，但是也是有可能出现这个

会导致最后请求的返回的数据，被之前的请求的数据覆盖

解决方案:

  • 取消之前的请求
  • xhr => abort()
  • axios => cancelToken
  • fetch => AbortController 和 AbortSignal

封装请求方法hooks​

  • 集成try/catch
  • 集成AbortController，实现取消请求