Promise 中的超时设置：如何更好地处理超时问题？

概述

在前端开发中，我们经常需要进行异步操作，例如发起网络请求或执行复杂的计算任务。Promise 是一种用于异步编程的解决方案，在处理异步操作时，其提供的 .then() 链式调用能够帮助我们更加优雅地处理异步逻辑。

然而，当异步操作耗时较长或出现异常时，我们需要确保异步操作在一定时间内得到了处理结果或失败原因。这就需要在 Promise 中进行超时设置，以避免长时间等待或持续阻塞应用程序的情况。

本文将介绍 Promise 中的超时设置，讨论如何更好地处理异步操作的超时问题，并提供实用示例代码。

Promise 超时设置的方式

在 Promise 中，有几种常用的方式可以进行超时设置。

1. setTimeout

首先，我们可以使用 JavaScript 提供的 setTimeout 函数，将要求超时的 Promise 包装在一个 Promise 中，并在一定时间后（超时时间）执行超时处理操作。例如：

// www.javascriptcn.com code example
function timeout(ms, promise) {
    return new Promise((resolve, reject) => {
        const timeoutId = setTimeout(() => {
            clearTimeout(timeoutId);
            reject(new Error(`Promise timed out after ${ms} ms`));
        }, ms);
        promise.then((value) => {
            clearTimeout(timeoutId);
            resolve(value);
        }, (error) => {
            clearTimeout(timeoutId);
            reject(error);
        });
    });
}

const p = new Promise((resolve, reject) => {
    // 异步操作任务
});

timeout(5000, p) // 超时时间为 5s
    .then((value) => {
        console.log(value);
    })
    .catch((error) => {
        console.log(error);
    });

在上面的示例代码中，我们使用了 setTimeout 函数来执行超时处理操作，创建了一个新的 Promise，并在其中进行异步操作任务。当 Promise 未在指定时间内完成时，setTimeout 函数会执行超时处理，并将 Promise 执行结果设置为超时错误。

2. Promise.race

另外，我们也可以使用 Promise.race 方法，将需要超时的 Promise 和一个 Promise 对象组成的数组合并起来，然后执行 Promise.race 方法，将 Promise 返回的结果与 Promise 对象组成的数组中的 Promise 如果先返回为准，如果时间超时 Promise 返回的结果是指定的超时信息。

Promise.race([promise, new Promise(function(resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000) // 超时时间为 5s
})])

在上面的示例代码中，我们通过将任务 Promise 和 一个新的 Promise 对象（用于超时处理）传递给 Promise.race 方法，达到了超时和任务完成后的处理结果统一的效果。

建议

在考虑使用 Promise 超时设置的方案时，我们需要注意以下几点：

• 超时时间的设置应该基于实际使用场景而定，过短的超时时间可能会导致可能正常完成的异步请求被误判为超时。
• 在处理超时错误时，我们需要根据实际情况来决定超时错误的处理方式，例如直接拒绝 Promise、重试等。
• 我们应该合理利用现有的异步操作库和工具函数等，以提高代码的可读性和可维护性。

示例代码

下面是一个完整的使用 Promise 超时设置的示例代码，其中使用了 axios 库来发送网络请求，请求的超时时间为 5 秒：

// www.javascriptcn.com code example
import axios from 'axios';

function sendRequest() {
  return axios.get('/api/data')
    .then((response) => {
        return response.data;
    })
    .catch((error) => {
        throw error;
    });
}

function timeout(ms, promise) {
    return new Promise((resolve, reject) => {
        const timeoutId = setTimeout(() => {
            clearTimeout(timeoutId);
            reject(new Error(`Promise timed out after ${ms} ms`));
        }, ms);
        promise.then((value) => {
            clearTimeout(timeoutId);
            resolve(value);
        }, (error) => {
            clearTimeout(timeoutId);
            reject(error);
        });
    });
}

timeout(5000, sendRequest())
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.log(error);
    });

在上面的示例代码中，我们使用了 timeout 函数对异步请求进行了超时设置，并在完成或超时后打印请求结果或错误信息。我们可以通过修改超时时间等参数，对代码进行测试和优化。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7ae84a941bf7134dc38a4