Fetch 的手动终止

今天在写一个前端页面的时候发现,我需要实现一个类似 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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞