通過koa2和Promise.race()構(gòu)造一個(gè)超時(shí)取消的ajax。

e10101 發(fā)布于2019-08-23 14:39 / 3054人閱讀

摘要：上說你可以使用構(gòu)造函數(shù)創(chuàng)建一個(gè)新的對(duì)象。使用對(duì)象完成與請(qǐng)求的通信。服務(wù)端使用重要的點(diǎn)在于不能直接使用這樣返回給前端會(huì)直接報(bào)錯(cuò)。前端的代碼要注意的第三個(gè)參數(shù)設(shè)置成將請(qǐng)求設(shè)置為異步，然后由于超時(shí)會(huì)取消請(qǐng)求，所以這里根本不需要來顯式的取消請(qǐng)求

MDN上說：

你可以使用AbortController.AbortController()構(gòu)造函數(shù)創(chuàng)建一個(gè)新的AbortController對(duì)象。 使用AbortSignal 對(duì)象完成與DOM請(qǐng)求的通信。

對(duì)于瀏覽器的兼容性有很高的要求，chrome在66版本以上， firefox在57以上，由于遇到了這樣的需求，所以用傳統(tǒng)的XHR實(shí)現(xiàn)了一下這個(gè)功能。

服務(wù)端使用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!");
});

重要的點(diǎn)在于不能直接使用setTimeout(ctx.body = "12345" ,3000);這樣返回給前端會(huì)直接報(bào)錯(cuò)。

前端的代碼：

 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()的第三個(gè)參數(shù)設(shè)置成true將AJAX請(qǐng)求設(shè)置為異步，然后由于超時(shí)會(huì)取消請(qǐng)求，所以這里根本不需要xhr.abort()來顯式的取消請(qǐng)求