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

原文链接:segmentfault.com

上一篇:进军高级前端开发工程师必备的知识图谱
下一篇:学会它,能让你工作学习效率提升10倍!

相关推荐

  • 🔥 Promise|async|Generator 实现&原理大解析 | 9k字

    笔者刚接触async/await时,就被其暂停执行的特性吸引了,心想在没有原生API支持的情况下,await居然能挂起当前方法,实现暂停执行,我感到十分好奇。好奇心驱使我一层一层剥开有关JS异步编程的...

    5 个月前
  • (ajax)query中全局事件ajaxStart ajaxStop

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时, 将调用ajaxStart()方法。 同样,ajaxStop()方法则是在所有Ajax请求都完成时调用。

    1 年前
  • 面试题1:Promise递归实现拉取数据

    题目:请用promise递归实现拉取100条数据,每次拉取20条,结束条件为当次拉取不足20条或者已经拉取100条数据 ...

    3 个月前
  • 面试官要求我们手动实现 Promise.all

    情景: 最近面试,有两次被问到手动实现 Promise.all,不幸的是我都没把这题做好。因为我没有去准备这个,我不知道手动实现已有的 API 有什么意义。 但是为了防止以后还会遇到此类题,还是记录下...

    2 个月前
  • 面试官你来,130行带你手写完整Promise

    大家好,我是雷锋蜀黍。一直在某些面试宝典看到面试官要你手撸一个promise,今天天气这么好,不如我们来搞一搞。(PS:从未看过别人的实现,本文更像是记录一个思考的过程) 最终的代码完全符合Promi...

    4 个月前
  • 非ajax jQuery POST请求

    amit(https://stackoverflow.com/users/107922/amit)提出了一个问题:nonAJAX jquery POST request,或许与您遇到的问题类似。

    2 年前
  • 阿里云centOS部署vue全家桶+node+koa2+mongo项目

    写在前面 文章有丢丢长,前端开发第一次部署项目,有问题请及时提出,以免误导其他童鞋,轻拍~, 更新系统 安装mongo 1. 添加MongoDB源 在/etc/yum.repos....

    1 年前
  • 防止重复发送 Ajax 请求

    要考虑并理解 success, complete, error, timeout 这些事件的区别,并注册正确的事件,一旦失误,功能将不再可用; 不可避免地比普通流程要要多注册一个 complete ...

    3 年前
  • 防止浏览器缓存ajax调用结果

    Mark BellSalamander2007(https://stackoverflow.com/users/43140/markbell)提出了一个问题:Prevent browser cachi...

    2 年前
  • 阅读Promise A+规范

    本文主要是PromiseA规范(https://promisesaplus.com/)的翻译加上个人的理解。 1 什么是Promise A promise represents the eve...

    2 年前

官方社区

扫码加入 JavaScript 社区