Fetch 的手动终止

2024年2月2日 432次阅读 来源: HTTP

今天在写一个前端页面的时候发现，我需要实现一个类似 Google 搜索的联想功能时，我需要手动终止自己发出去的请求，比如：

《Fetch 的手动终止》
类似输入联想

在这个时候，假如用户一直输入，如果不做处理那么就会导致 1s 内很多的请求，这是不合理的。比如我输入 前端的, 假如不做处理，浏览器就会发起三个请求，分别是针对 前， 前端， 前端的 三个字的请求，并且每一个都拿到结果然后渲染到页面中，但是其实，我们只需要拿到针对 前端的 的查询结果就行了，这个时候我认为比较好的做法是 当检测到用户输入时，取消针对上一个搜索字的请求，于是，我查阅了相关的资料，首先因为我使用的是 Fetch ，所以在 MDN 上查到了相关的资料那就是今天的主角 AbortController ，先看官方的 Demo，

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

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

很明显，一目了然，能够很清晰的知道，采用这种方式可以手动终止 Fetch，但是可惜的是前端的新技术的通病， 浏览器支持力度， 从 MDN 上可以看到这个技术尚处于正在开发阶段。

《Fetch 的手动终止》
AbortController 的浏览器兼容力度

几乎都是比较新的浏览器才会支持。

是不是很可惜，如此好的技术却只能看着。但是，我们不一定非要使用官方的规范，我们可以使用第三方的模块，比如 Axios ，在这个项目的 github 主页，能看到关于 取消的使用，有兴趣可以自己去查看并且使用。

后面是我自己想着只使用 Fetch 但是又能手动终止的实现，因为莫名的感觉使用 Fetch 很清爽 😂。

我的思路其实也借鉴了上面两种方式的思想，简单的说就是重新封装异步的请求，然后再通过 setter 去让异步请求主动的 reject。

Talk is cheap. Show me the code :

function wrap (func, ...args) {
    const cancel = {};
    return () => {
        const promiseHandle = new Promise((resolve, reject) => {
            Object.defineProperty(cancel, 'signal', {
                set () {
                    reject('Abort');
                }
            })

            func(...args).then(v => resolve(v)).catch(err => reject(err))
        });

        return Object.assign(promiseHandle, {
            cancel () {
                cancel.signal = true;
            }
        });
    }

}

写得很简陋，主要就是利用了 setter 来调用封装的 Promise 主动的执行 setter 内的 reject 函数。

完整示例:

function wrap (func, ...args) {
    const cancel = {};
    return () => {
        const promiseHandle = new Promise((resolve, reject) => {
            Object.defineProperty(cancel, 'signal', {
                set () {
                    reject('Abort');
                }
            })

            func(...args).then(v => resolve(v)).catch(err => reject(err))
        });

        return Object.assign(promiseHandle, {
            cancel () {
                cancel.signal = true;
            }
        });
    }

}

var func = wrap((v) => new Promise((res, rej) => {
    setTimeout(() => res(v), 5000);
}), 23333)

var a = func()

a.then(v => console.log(v)).catch(err => console.error(err))
a.cancel()

使用结果能达到预期行为，假如有错误之处，请指正，谢谢🙏！

    原文作者：HTTP
    原文地址: https://juejin.im/entry/5af85b6f518825426a1fc8c8
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞