通过koa2和Promise.race()构造一个超时取消的ajax。

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()来显式的取消请求