Promise 是 JavaScript 中一种用于异步编程的技术，它能够让我们更加方便地处理异步操作，避免回调地狱。但在实际开发中，我们经常需要控制 Promise 的执行流程，比如在某些条件下中断一个 Promise 的执行，或者在某些条件下重新启动一个 Promise 的执行。本文将介绍如何在 Promise 中实现任务的退出与进入，帮助读者更好地掌握 Promise 的使用技巧。
Promise 中的任务退出
在 Promise 中，任务退出指的是在某些条件下中断一个 Promise 的执行，比如用户取消了一个操作、网络请求超时等情况。在这些情况下，我们需要将 Promise 的状态设置为 rejected，并且返回一个错误信息。
下面是一个示例代码，展示了如何实现一个支持任务退出的 Promise：
// www.javascriptcn.com code example
function fetchData(url, abortSignal) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.statusText));
}
};
xhr.onerror = () => {
reject(new Error("Network Error"));
};
if (abortSignal) {
abortSignal.addEventListener("abort", () => {
xhr.abort();
reject(new Error("Aborted"));
});
}
xhr.send();
});
}在这个示例中，我们定义了一个 fetchData 函数，它接受两个参数：url 和 abortSignal。url 表示要请求的资源地址，abortSignal 表示一个 AbortSignal 对象，用于中断任务的执行。
在 fetchData 函数内部，我们创建了一个 XMLHttpRequest 对象，并设置了它的 onload 和 onerror 回调函数。如果请求成功，我们将 Promise 的状态设置为 resolved，并返回响应的数据，否则将 Promise 的状态设置为 rejected，并返回一个错误信息。
在这个函数中，我们还通过 addEventListener 方法监听了 abortSignal 的 abort 事件。如果 abortSignal 被触发，我们将 XMLHttpRequest 对象中止，并将 Promise 的状态设置为 rejected，并返回一个错误信息。
这样，我们就实现了一个支持任务退出的 Promise。
Promise 中的任务进入
在 Promise 中，任务进入指的是在某些条件下重新启动一个 Promise 的执行，比如用户重新发起了一个请求、网络连接恢复等情况。在这些情况下，我们需要重新创建一个 Promise 对象，并返回它的执行结果。
下面是一个示例代码，展示了如何实现一个支持任务进入的 Promise：
// www.javascriptcn.com code example
function fetchData(url) {
let abortController;
let retryCount = 0;
const retryDelay = [1000, 2000, 3000];
function fetchWithRetry() {
abortController = new AbortController();
return fetch(url, { signal: abortController.signal })
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error(response.statusText);
}
})
.catch((error) => {
if (retryCount < retryDelay.length) {
retryCount++;
return new Promise((resolve) =>
setTimeout(resolve, retryDelay[retryCount - 1])
).then(fetchWithRetry);
} else {
throw error;
}
});
}
return fetchWithRetry();
}在这个示例中，我们定义了一个 fetchData 函数，它接受一个参数 url，表示要请求的资源地址。在这个函数内部，我们定义了一个 fetchWithRetry 函数，它用于执行网络请求，并支持自动重试。在 fetchWithRetry 函数中，我们使用了 AbortController 对象来控制网络请求的中断，以及通过 setTimeout 方法来实现自动重试的延迟。
在 fetchData 函数中，我们调用了 fetchWithRetry 函数，并返回它的执行结果。如果网络请求失败，fetchWithRetry 函数会根据重试次数和重试延迟来决定是否重新发起网络请求，直到重试次数达到上限或者网络请求成功为止。
这样，我们就实现了一个支持任务进入的 Promise。
结语
本文介绍了如何在 Promise 中实现任务的退出与进入，帮助读者更好地掌握 Promise 的使用技巧。在实际开发中，我们经常需要控制 Promise 的执行流程，这些技巧能够帮助我们更加灵活地处理异步操作，提高代码的可维护性和可读性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3409ba941bf713462443b