Fetch设置超时时间

最新推荐文章于 2025-02-28 08:14:18 发布

帅气你勇哥

最新推荐文章于 2025-02-28 08:14:18 发布

阅读量4.7k

点赞数 1

分类专栏： html5 javascript es6 文章标签： fetch ajax 前端

本文链接：https://blog.youkuaiyun.com/q857637472/article/details/89887441

版权

javascript 同时被 3 个专栏收录

22 篇文章

订阅专栏

html5

14 篇文章

订阅专栏

es6

7 篇文章

订阅专栏

博客围绕前端技术展开，涉及fetch和ajax。这两种技术在前端开发中较为重要，fetch是一种新的网络请求API，ajax则是传统的异步数据交互技术，它们能提升前端页面的数据交互能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 *
 *
 * @param {string} url
 * @param {number} 超时时间
 * @returns
 */
function request(url,wait=30) {
  return new Promise((resolve, reject) => {
    let status = 0; // 0 等待 1 完成 2 超时
    let timer = setTimeout(() => {
      if (status === 0) {
        status = 2;
        timer = null;
        reject("超时");
      }
    }, 3000);
    fetch(url, {
      headers: {
        "content-type": "application/json"
      }
    })
      .then(res => res.json())
      .then(res => {
        if (status !== 2) {
          clearTimeout(timer);
          resolve(res);
          timer = null;
          status = 1;
        }
      });
  });
}

request("/test")
  .then(res => {
    document.body.innerHTML =
      typeof res !== "string" ? JSON.stringify(res) : res;
  })
  .catch(err => {
    console.log("err", err);
  });