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

e10101 發布于2019-08-23 14:39 / 3060人閱讀

摘要：上說你可以使用構造函數創建一個新的對象。使用對象完成與請求的通信。服務端使用重要的點在于不能直接使用這樣返回給前端會直接報錯。前端的代碼要注意的第三個參數設置成將請求設置為異步，然后由于超時會取消請求，所以這里根本不需要來顯式的取消請求

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

GPU云服務器云服務器一個有趣的Ajax 一個封裝的Ajax類 ajax超時 java構造一個隊列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100931.html

javascript異步之Promise.all()、Promise.race()、Promise.

摘要：的執行與狀態無關當得到狀態不論成功或失敗后就會執行，原文鏈接參考鏈接對象同期異步系列文章推薦談一談javascript異步javascript異步中的回調javascript異步與promisejavascript異步之Promise.resolve()、Promise.reject()javascript異步之Promise then和catchjavascript異步之async...

clasnake 2019-08-23 14:53 評論0 收藏0
es6:常用命令（2）

摘要：本身是一個構造函數，用來生成數據結構。結構具有的屬性構造函數，默認是函數。舉例鏈式刪除某個鍵清空對象是一個構造函數，用來生成實例，是異步編程的一種解決方案。構造函數接受一個函數作為參數，該函數的兩個參數分別是函數和。 1、 Set 和 Map數據結構 Set 數據結構 Set 類似數組，但是成員是唯一的，不存在重復值。 Set本身是一個構造函數，用來生成Set數據結構。 Set...

wua_wua2012 2019-08-26 11:40 評論0 收藏0
Promise使用細節

摘要：應用把一個異步操作和定時器放在一起。如果定時器先觸發就提示用戶超時用戶超時什么是值穿透或者期望傳入一個函數如果不是函數會發生值穿透和的第二個參數的區別比較類似是一個語法糖相當于還有一點區別就是如果第一個報錯第二個無法捕獲。 Promise使用細節使用promise需要注意的幾點: 1.如何用promise實現并行的異步 (Promise.all配合.map) Promise.all...

fnngj 2019-08-22 16:31 評論0 收藏0
通過回調來理解Promise

摘要：可信任性確定性在解決上述的回調函數的問題之前，有必要先來認識一下的一些主要方法的起點執行結果依次是，，，代碼解讀以上代碼體現了的如下特性一旦決議調用過一次或者就不再重復調用決議回調或者改變決議回調。通過回調來理解Promise 我們都知道Promise的出現是為了規避回調地獄的，由此，我們先來深入了解一下回調的缺陷：回調 1、缺乏信任 2、不確定性 Example var mo...

DevYK 2019-08-20 18:30 評論0 收藏0