当前位置: 首页 > article >正文

JavaScript实现接口请求的超时机制方法汇总

在 JavaScript 中实现接口请求的超时机制有多种方法。以下是几种常见的方法汇总:

1. 使用 Promise.race

Promise.race 方法可以将请求的 Promise 和一个超时的 Promise 结合起来,哪个 Promise 先完成就以哪个为准。

const fetchWithTimeout = (url, options = {}, timeout = 5000) => {
  const fetchPromise = fetch(url, options);

  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error('Request timed out'));
    }, timeout);
  });

  return Promise.race([fetchPromise, timeoutPromise]);
};

// 使用示例
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', { method: 'GET' }, 3000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));

2. 使用 AbortController

AbortController 是一个现代的 API,用于中止 fetch 请求。可以结合 setTimeout 实现超时机制。

const fetchWithTimeout = (url, options = {}, timeout = 5000) => {
  const controller = new AbortController();
  const { signal } = controller;

  const fetchPromise = fetch(url, { ...options, signal });

  const timeoutId = setTimeout(() => {
    controller.abort();
  }, timeout);

  return fetchPromise.finally(() => clearTimeout(timeoutId));
};

// 使用示例
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', { method: 'GET' }, 3000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));

3. 使用 axios 的超时选项

如果你使用 axios 库,可以直接使用其内置的超时选项。

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts', { timeout: 3000 })
  .then(response => console.log(response.data))
  .catch(err => console.error('Error:', err));

4. 手动实现超时机制

通过 setTimeoutPromise 结合来实现

const fetchWithTimeout = (url, options = {}, timeout = 5000) => {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      reject(new Error('Request timed out'));
    }, timeout);

    fetch(url, options)
      .then(response => {
        clearTimeout(timeoutId);
        resolve(response);
      })
      .catch(err => {
        clearTimeout(timeoutId);
        reject(err);
      });
  });
};

// 使用示例
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', { method: 'GET' }, 3000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));

总结

  • Promise.race:将请求的 Promise 和一个超时的 Promise 结合起来,哪个 Promise 先完成就以哪个为准。
  • AbortController:使用现代的 API 中止 fetch 请求,结合 setTimeout 实现超时机制。
  • axios 的超时选项:如果使用 axios 库,可以直接使用其内置的超时选项。
  • 手动实现超时机制:通过 setTimeoutPromise 结合来实现。

选择适合你项目需求的方法来实现接口请求的超时机制。


http://www.kler.cn/a/331234.html

相关文章:

  • 【C++】B2066救援题目分析和解决讲解
  • Unity3D用正则判断身份证号或邮箱
  • VMware vCenter保姆级安装部署(VMware VCenter Nanny Level Installation and Deployment)
  • linux-19 根文件系统(一)
  • 记录仪方案_记录仪安卓主板定制_音视频记录仪PCBA定制开发
  • 图书管理系统:提升图书馆服务质量的技术解决方案
  • AIOps案例 | 历史库异常,如何快速响应与优化?
  • 【大数据入门 | Hive】Join语句
  • CSS 盒子属性
  • 霍夫曼树及其与B树和决策树的异同
  • 设计模式-生成器模式/建造者模式Builder
  • Python画笔案例-070 绘制通电棒棒
  • 这次PostgreSQL事故后,我把表膨胀清理工具撸了一遍
  • vulnhub-unknowndevice64 2靶机
  • 【MySQL】多表联合查询常见练习题
  • Vue3动态导入后端路由
  • 使用 Vue3 和 Axios 实现 CRUD 操作
  • Linux忘记root用户密码怎么重设密码
  • SpringCloud Config配置中心 SpringCloud Bus消息总线
  • SQL基础教程
  • linux系统解压zip文件名乱码
  • vue3项目执行pnpm update后还原package.json文件后运行报错
  • 7.使用 VSCode 过程中的英语积累 - Terminal 菜单(每一次重点积累 5 个单词)
  • docker快速安装ELK
  • IDEA在git提交时添加忽略文件
  • 【动态规划-分组背包】【hard】力扣2218. 从栈中取出 K 个硬币的最大面值和