fetch超时&缓存了解一下？
2023-12-23 01:48:28
想不到吧，fetch还支持缓存！
利用fetch存储的缓存与我们平常说的浏览器存储的缓存是两个完全不同的概念，而fetch的这个缓存机制叫做拦截器。
利用这样的缓存机制，我们可以在做请求时如果请求超时，可以使用缓存好的资源，来做一个合理的错误处理。
另外，我们还可以设置fetch超时时间，让它在规定的时间内运行，超时自动中断运行。
利用缓存机制实现网络请求超时功能的话，一般在使用之前都会对服务器进行CORS配置。
如果我们没有设置缓存控制策略，那么其实在使用fetch时已经默认生成了缓存，只是这个缓存并不是直接储存在客户端的磁盘上，而是储存在内存中的。
fetch是什么
fetch是浏览器提供的一个获取资源的API，它支持通过网络或其他协议传输的数据。它主要用于通过HTTPS协议来获取远程资源，使用该API可以轻松的以流的形式获取请求结果。
利用fetch的功能，我们可以很容易的来处理一些异步任务。
根据请求返回的数据，fetch能够自动转换返回的内容的格式，具体支持返回以下几种类型的格式：
- 文本
- JSON
- Form Data
- Blob
- ArrayBuffer
fetch的超时设置
fetch支持设置超时时间，这个超时时间的单位是毫秒，如果设置的值太小，会导致网络环境稍差一点就会触发超时。
在设置超时时间前，我们最好先做一个预估，或者先通过尝试来确定合理的超时时间。
如果超时时间设置的不合理，就会出现获取不到资源，或者出现错误的数据，对于这种情况我们可以通过对超时做一次特殊处理来解决。
利用fetch实现超时处理
fetchAPI实现了Promise规范，我们在fetch处理中可以非常容易的实现超时处理，具体方法就是设置fetch的超时时间。
在设置了超时时间后，如果请求超时，fetch就会抛出异常，那么我们只需要处理这个异常即可。
有了这样的机制，我们就可以实现一些特殊场景下的异常处理。
具体步骤如下：
- 新建一个Promise对象，然后设置fetch的超时时间，注意超时时间的单位是毫秒；
- 然后将fetch请求放入到Promise对象的executor函数中，fetch成功后会调用resolve方法，超时后会调用reject方法；
- 最后我们可以利用Promise对象的then和catch方法来处理超时的情况。
利用上述这种方式，我们就可以根据具体的业务需求来定义超时处理方案，这样当请求超时后，可以根据业务需求给用户合理的提示，告知用户请求超时，避免陷入无穷的等待状态。
浏览器缓存原理
上面说的fetch中的缓存机制和浏览器缓存机制完全不一样，浏览器缓存机制会将静态资源的请求结果存储在浏览器中，在下次请求这些资源时，浏览器会先去寻找缓存的资源。
如果找到了，则使用缓存中的资源，否则才去请求服务器。
浏览器缓存的策略有：
- 强制缓存：每次请求资源时，总是先读取缓存中的资源，无论缓存是否过期。
- 协商缓存：每次请求资源时，先向服务器发送一个请求，服务器会根据请求头中的相关字段来判断是否需要更新缓存。
- 无缓存：每次请求资源时，总是直接向服务器发送一个请求，不会读取缓存中的资源。
