Promise 如何取消请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要向后端发送请求来获取数据，但有时候我们可能需要取消一些请求，比如用户在某个页面进行了操作，但是该页面上的数据请求还未返回，这时候用户可能会离开该页面，如果我们没有及时取消该请求，就会造成不必要的资源浪费和网络负担。

Promise 是一种用于异步编程的语法，它可以让我们更加方便地处理异步操作，同时也提供了一种取消 Promise 的方法，接下来我们就来详细介绍如何使用 Promise 取消请求。

Promise 取消请求的方式

在 Promise 中取消请求有两种方式，分别是通过 abortController 和手动实现取消。

通过 abortController 取消请求

AbortController 是一个新的 Web API，它提供了一种取消网络请求的方法，它可以用于取消 Fetch 请求和 XmlHttpRequest 请求。

使用 AbortController 取消请求的具体步骤如下：

创建一个 AbortController 对象和一个对应的 AbortSignal 对象。

const controller = new AbortController();
const signal = controller.signal;

将 AbortSignal 对象作为 fetch 或 xhr 请求的 signal 参数传入。

fetch(url, {signal}).then(...).catch(...);
xhr.open(method, url);
xhr.send(data);
xhr.addEventListener('abort', () => { ... });
xhr.addEventListener('error', () => { ... });
xhr.addEventListener('timeout', () => { ... });
xhr.abort();

调用 AbortController 对象的 abort 方法来取消请求。

controller.abort();

手动实现取消

手动实现取消请求的具体步骤如下：

构造一个 Promise 对象。

const promise = new Promise((resolve, reject) => {
    ...
});

在 Promise 对象中添加一个 cancel 可调用函数，该函数用于取消请求。

const promise = new Promise((resolve, reject) => {
    promise.cancel = () => {
        ...
    };
});

在请求中添加一个标志位，用于判断是否需要取消请求。

const promise = new Promise((resolve, reject) => {
    let isCanceled = false;
    ...
});

在请求过程中，判断标志位是否为 true，如果为 true 则取消请求。

const promise = new Promise((resolve, reject) => {
    let isCanceled = false;
    const request = fetch(url).then(response => {
        if (isCanceled) {
            reject(new Error('Request canceled'));
            return;
        }
        resolve(response);
    }).catch(error => {
        if (isCanceled) {
            reject(new Error('Request canceled'));
            return;
        }
        reject(error);
    });
    promise.cancel = () => {
        isCanceled = true;
        request.abort();
    };
});

Promise 取消请求的示例代码

下面是一个使用 Promise 和 AbortController 取消 Fetch 请求的示例代码：

const controller = new AbortController();
const signal = controller.signal;

fetch(url, {signal}).then(response => {
    console.log(response);
}).catch(error => {
    if (error.name === 'AbortError') {
        console.log('Request canceled');
    } else {
        console.error(error);
    }
});

controller.abort();

下面是一个使用 Promise 和手动实现取消请求的示例代码：

const promise = new Promise((resolve, reject) => {
    let isCanceled = false;
    const request = fetch(url).then(response => {
        if (isCanceled) {
            reject(new Error('Request canceled'));
            return;
        }
        resolve(response);
    }).catch(error => {
        if (isCanceled) {
            reject(new Error('Request canceled'));
            return;
        }
        reject(error);
    });
    promise.cancel = () => {
        isCanceled = true;
        request.abort();
    };
});

promise.then(response => {
    console.log(response);
}).catch(error => {
    console.error(error);
});

promise.cancel();

总结

通过本文的介绍，我们了解了 Promise 如何取消请求的两种方式，分别是通过 AbortController 和手动实现取消。在实际开发中，我们可以根据具体情况选择使用哪种方式来取消请求，从而避免不必要的资源浪费和网络负担。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e24dbeb4cecbf2d3f8107