js——Fetch

最新推荐文章于 2023-10-02 07:23:04 发布

肖ZE

最新推荐文章于 2023-10-02 07:23:04 发布

阅读量194

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/lucky541788/article/details/103177111

版权

javascript 专栏收录该内容

89 篇文章 2 订阅

订阅专栏

本文探讨了在JavaScript中使用Fetch API时遇到的问题，即如何在超时后取消请求。通过介绍Promise的race和all方法，展示了Fetch请求在慢速网络环境下可能存在的问题。为了解决这个问题，文章介绍了AbortController的用法，它允许手动终止DOM请求，从而在Fetch请求中实现超时控制。结合AbortController，可以更好地管理和控制Fetch请求的生命周期。

摘要由CSDN通过智能技术生成

关于 fetch

取消 Fetch

ES6以后Promise 出现解决地狱回调等不优雅的代码风格。个人理解这个更像是一个生产者和消费者的关系，查看 Promise文档，有以下两个方法

Promise.race([promise1,promise2]) 传入多个Promise对象，等待最快对象完成
Promise.all([promise1,promise2]) 传入多个Promise 对象，等待所有对象完成

let timeoutPromise = (timeout) => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve("我是 timeoutPromise，已经完成了");
  }, timeout);
 });
}
let requestPromise = (url) => {
 return fetch(url);
};
Promise.race([timeoutPromise(1000), requestPromise("https://www.baidu.com")])
 .then(resp => {
  console.log(resp);
 })
 .catch(error => {
  console.log(error);
 });

将上边的代码拷贝的浏览器控制台并将network设置为Slow3G。运行就会发现，虽然我们在控制台看到了超时信息，但切换到netwok页签中发现请求依然正常进行中，并返回了正确的内容。这并不是我想要的结果，我希望超时时间到了，请求也应该终止。

fetch请求成功后，默认返回一个Response对象，那么我们如何在代码中构造一个这样的对象呢?

timeoutResp=new Response("timeout", { status: 504, statusText: "timeout " })
successResp=new Response("ok", { status: 200, statusText: "ok " })

AbortController 用于手动终止一个或多个DOM请求，通过该对象的AbortSignal注入的Fetch的请求中。所以需要完美实现timeout功能加上这个就对了

let controller = new AbortController();
let signal = controller.signal;
 
let timeoutPromise = (timeout) => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve(new Response("timeout", { status: 504, statusText: "timeout " }));
   controller.abort();
  }, timeout);
 });
}
let requestPromise = (url) => {
 return fetch(url, {
  signal: signal
 });
};
Promise.race([timeoutPromise(1000), requestPromise("https://www.baidu.com")])
 .then(resp => {
  console.log(resp);
 })
 .catch(error => {
  console.log(error);
 });

关于 AbortController

官方实例

var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}