共计 1352 个字符，预计需要花费 4 分钟才能阅读完成。
MDN 上说：
你可以使用 AbortController.AbortController() 构造函数创建一个新的 AbortController 对象。使用 AbortSignal 对象完成与 DOM 请求的通信。
对于浏览器的兼容性有很高的要求，chrome 在 66 版本以上，firefox 在 57 以上，由于遇到了这样的需求，所以用传统的 XHR 实现了一下这个功能。
服务端使用 koa2：
/**
* @vividw
* 2019.1.10
*/
const Koa = require(‘koa’);
const app = new Koa();
const Router = require(‘koa-router’);
const router = new Router();
const {resolve} = require(‘path’);
const koaStatic = require(‘koa-static’);
const cors = require(‘@koa/cors’);
const sleep = (count) => new Promise(resolve => {
setTimeout(resolve, count);
});
// router.get(‘/’, async (ctx, next) => {
// ctx.body = ‘Hello,Wolrd!’;
//
// await next();
// });
router.get(‘/data’, async (ctx, next) => {
await sleep(3000);
ctx.body = {
data: ‘12345’
}
await next();
});
app
.use(cors())
.use(koaStatic(resolve(__dirname + ‘/’)))
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000, () => {
console.log(‘App running!’);
});
重要的点在于不能直接使用 setTimeout(ctx.body = ‘12345’ ,3000); 这样返回给前端会直接报错。
前端的代码：
const ownFetch = (count) => new Promise((resolve,reject) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status == 200){
resolve(xhr);
}
}
}
xhr.timeout = count;
xhr.open(‘get’, ‘http://localhost:3000/data’, true);
xhr.send();
})
window.onload = () => {
const timeout = (count) => new Promise((resolve, reject) => {
setTimeout(() => {
reject(‘failed’);
}, count);
});
(async () => {
ownFetch(2000);
})();
}
要注意 xhr.open() 的第三个参数设置成 true 将 AJAX 请求设置为异步，然后由于超时会取消请求，所以这里根本不需要 xhr.abort() 来显式的取消请求
