今天在写一个前端页面的时候发现，我需要实现一个类似 Google 搜索的联想功能时，我需要手动终止自己发出去的请求，比如：
类似输入联想
在这个时候，假如用户一直输入，如果不做处理那么就会导致 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 上可以看到这个技术尚处于正在开发阶段。
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()
感觉使用 setter 这个有点不太优雅，那么在 node 环境中，我们可以借助 events 这个内置库来实现同样的效果，而且代码看起来更优雅
const EventEmitter = require('events');
function wrap (func, ...args) {
const emitter = new EventEmitter();
return () => {
const promiseHandle = new Promise((resolve, reject) => {
emitter.on('cancel', () => {
reject(new Error('Reject'));
})
func(...args).then(v => resolve(v)).catch(err => reject(err))
});
return Object.assign(promiseHandle, {
cancel () {
emitter.emit('cancel');
}
});
}
}
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()
同理，还可以用 Rxjs 的观察者模式来做，基本原理看到这里应该很清晰了吧，就是封装成一个 Promise 然后再定义一个函数，可以触发 reject , 最后再暴露出一个函数用于触发 Promise 里面的函数。说得有点绕，其实原理很简单。
假如有错误之处，请指正，谢谢🙏！
网友评论