很妙的请求超时控制？分享 1 段优质 JS 代码片段！这段代码展示了如何通过 Promise.race 方法，来巧妙实现

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 700+  字，整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段，很秒的实现了对异步请求的超时控制。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

// 如果在指定的毫秒数内未返回，则拒绝并显示“超时”错误
const timeout = (promise, ms) =>Promise.race([promise, newPromise((_, reject) => setTimeout(() => reject(newError("Timeout")), ms))]);

timeout(fetch("https://api.riki.wang"), 5000)
  .then(() =>"handleResponse")
  .catch(() =>"handleError");

分享原因

这段代码展示了如何通过 Promise.race 方法，来巧妙实现对异步操作的超时控制。

这在处理网络请求或其他可能耗时的操作时非常有用，可以避免长时间的等待导致的不良用户体验。

代码解析

1. Promise.race()

Promise.race() 方法是 JavaScript 中 Promise 对象的一个方法。

它用于并行执行多个 Promise 实例，并返回第一个完成（无论是成功完成还是失败拒绝）的 Promise 的结果，且其他 Promise 的结果会被忽略。

这里定义了一个名为 timeout 的函数，它接受一个 promise 对象和一个毫秒数 ms 作为参数。

在这个函数中，创建了一个新的 Promise ，它会在指定的 ms 毫秒后通过 reject 抛出一个 Timeout 错误。然后将这个新创建的 Promise 和传入的 promise 一起传递给 Promise.race 。

2. timeout(fetch, 5000)

调用 timeout 函数，并将 fetch 操作 和 超时时间 5000 毫秒作为参数传入。

如果在 5000 毫秒内 fetch 操作完成，就会进入 then 回调，执行 "handleResponse" 。

如果在 5000 毫秒内 fetch 操作未完成，那么由 setTimeout 创建的 Promise 会抛出 Timeout 错误，导致进入 catch 回调，执行 "handleError" 。