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