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

Promise中处理请求超时问题

1. 使用 Promise.race() 处理超时Promise

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>promise-ajax</title>
</head>
<body>
<script type="text/javascript">// Create a timeout promise
function timeoutPromise(ms) {return new Promise((_, reject) => {setTimeout(() => reject(new Error('Request timeout')), ms);});
}// Fetch with timeout using Promise.race
async function fetchDataWithTimeout(url, timeout = 5000) {try {const response = await Promise.race([fetch(url),timeoutPromise(timeout)]);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.text();return data;} catch (error) {console.error('Fetch error:', error);throw error;}
}// Usage
async function useWithTimeout() {try {const url = 'http://localhost:30000/test/slow';const result = await fetchDataWithTimeout(url, 3000); // 3 second timeoutconsole.log('Result:', result);} catch (error) {if (error.message === 'Request timeout') {console.error('Request timed out!');} else {console.error('Other error:', error);}}
}useWithTimeout();</script></body>
</html>

以上代码,设置超时时间为3秒,请求后3秒没有收到接口响应结果,就会结束请求。

2.使用 AbortController终止promise请求

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>promise-ajax</title>
</head>
<body>
<script type="text/javascript">async function fetchDataWithAbort(url, timeout = 5000) {const controller = new AbortController();const timeoutId = setTimeout(() => controller.abort(), timeout);try {const response = await fetch(url, {signal: controller.signal});clearTimeout(timeoutId);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.text();return data;} catch (error) {clearTimeout(timeoutId);if (error.name === 'AbortError') {throw new Error('Request timeout');}console.error('Fetch error:', error);throw error;}
}// Usage
async function useWithAbort() {try {const url = 'http://localhost:30000/test/slow';const result = await fetchDataWithAbort(url, 3000); // 3 second timeoutconsole.log('Result:', result);} catch (error) {if (error.message === 'Request timeout') {console.error('Request timed out!');} else {console.error('Other error:', error);}}
}useWithAbort();</script></body>
</html>

同理,设置超时时间为3秒,请求后3秒没有收到接口响应结果,就会结束请求。

3.使用超时和重试次数来处理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>promise-ajax</title>
</head>
<body>
<script type="text/javascript">// Async function that returns a value
async function fetchWithRetryAndTimeout(url, options = {}) {const { timeout = 5000, retries = 3, retryDelay = 1000 } = options;for (let i = 0; i <= retries; i++) {try {const controller = new AbortController();const timeoutId = setTimeout(() => controller.abort(), timeout);try {const response = await fetch(url, {signal: controller.signal,...options});clearTimeout(timeoutId);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.text();return data;} catch (error) {clearTimeout(timeoutId);if (error.name === 'AbortError') {throw new Error('Request timeout');}throw error;}} catch (error) {console.log(`Attempt ${i + 1} failed:`, error.message);if (i === retries) {throw new Error(`Failed after ${retries + 1} attempts: ${error.message}`);}// Wait before retryingawait new Promise(resolve => setTimeout(resolve, retryDelay));}}
}// Usage
async function useWithRetry() {try {const url = 'http://localhost:30000/test/slow';const result = await fetchWithRetryAndTimeout(url, {timeout: 3000,retries: 3,retryDelay: 1000});console.log('Result:', result);} catch (error) {console.error('Final error:', error.message);}
}useWithRetry();
</script></body>
</html>

以上代码,设置超时时间为3秒,请求间隔为1s,第一次请求失败后重试3次,如果重试3次后依然识别,就会结束请求。

http://www.hskmm.com/?act=detail&tid=12066

相关文章:

  • 图解26:老生常谈的OSI网络模型
  • 【C++】指针
  • AI驱动建筑行业数字化转型
  • 详细介绍:前端学习——CSS
  • VSCode 把代码发送到激活状态下的终端
  • 线性结构之数组[基于郝斌课程]
  • 完整教程:Vue中的props方式
  • 图解25:MySQL主从复制原理
  • 用 Go 编写验证码识别脚本(基于 Tesseract)
  • 软工第二次作业
  • Zero-Shot、One-Shot、Few-Shot概念
  • ADS放入元器件include和DK.zip文件依然提示未定义
  • AI元人文(十三):良知觉醒——论三值伦理模型与元道德主体的诞生
  • 「MCOI-05」魔仙
  • BlueHat v18 会议资料现已发布:前沿安全技术与漏洞缓解策略
  • label和brand的区别(品牌=brand?错了,你们的英语都学错了!)
  • 2025.9.21——1绿
  • 故障处理:ORA-04031真实案例分享
  • 图解24:8种常用的缓存淘汰策略
  • 读书笔记:更智能的数据库索引:只关注你需要的数据
  • JS设计模式-模块模式
  • 关于天猫精灵喵控的初步拆机研究
  • 利用Burpsuite实现抓取https流量
  • C++完全攻略:从新手到高手的编程进化之路 - 详解
  • 深入解析:敏捷开发-Scrum(下)
  • RTX4090双卡本地布署QwenImage模型并生成OpenAI API - yi
  • Visual Studio 报错:“9_自定义命令”名称在默认命名空间“9_自定义命令”中无效。请更正项目文件中的 RootNamespace 标记值。
  • 图解23:datetime和timestamp的区别
  • 深入解析:SQL语句优化的步骤详解
  • 在Java中识别泛型信息