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

e10101 发布于2019-08-23 14:39 / 3053人阅读

摘要：上说你可以使用构造函数创建一个新的对象。使用对象完成与请求的通信。服务端使用重要的点在于不能直接使用这样返回给前端会直接报错。前端的代码要注意的第三个参数设置成将请求设置为异步，然后由于超时会取消请求，所以这里根本不需要来显式的取消请求

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构造一个队列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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