如果 api 调用没有响应则设置超时

Question

如果 api 调用没有响应，我想在本地设置一个超时，如果 10 秒后没有响应，则取消调用。如何使用 settimout 方法或 Promise 来完成此操作？示例（有错误）：

const func() = await fetch(api)
setTimeout(()=>{
    cancelFunc()  // if no response after 10 seconds
},10000)

Answer 1

执行此操作的最佳方法在一定程度上取决于您希望发生的情况。如果您想要的只是获取请求超时，您可以使用Promise.race。

此函数接受一组 Promise，并返回一个新 Promise，一旦数组中的 Promise 之一解析或拒绝，该 Promise 就会解析或拒绝。

const timeout = (ms) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error("Request timed out"));
        }, ms);
    });
};

const fetchWithTimeout = async (url, options, timeoutInMs) => {
    return Promise.race([
        fetch(url, options),
        timeout(timeoutInMs)
    ]);
};

try {
    const response = await fetchWithTimeout(api, {}, 10000);
    // process response
} catch (error) {
    console.error(error);
    // handle timeout error
}

但这只是选择“赢得”比赛的承诺。重要的是，它不会取消获取操作。

如果这对你来说不重要，那么np！但如果确实如此，您应该考虑使用不同的方法，使用 AbortController，这可以说是此类操作的最佳实践（正如另一位评论者提到的）