通過koa2和Promise.race()構造一個超時取消的ajax。

vividW發表於2019-02-16
Promise

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()來顯式的取消請求

相關文章