`
yuyongkun4519
  • 浏览: 43099 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript异步编程解决方案Promise、Generator、Async

阅读更多

下面通过按顺序读取本地文件data/1.txt-->data/2.txt-->data/3.txt三个问题来介绍三者的使用方式和差别



 1,使用Promise实现

const fs = require('fs');

function readFile(filename) {
    return new Promise((resolve, reject) => {
        fs.readFile(filename, (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        });

    });
}

readFile('data/1.txt').then(res => {
    console.log(res.toString());
    return readFile('data/2.txt');
}).then(res => {
    console.log(res.toString());
    return readFile('data/3.txt');
}).then(res => {
    console.log(res.toString());
});

 2,使用Generator的方式实现

const fs = require('fs');

function readfile(pathname) {
    return new Promise((resolve, reject) => {
        fs.readFile(pathname, (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        });

    });
}

function* gen() {
    yield readfile('data/1.txt');
    yield readfile('data/2.txt');
    yield readfile('data/3.txt');
}
let g1 = gen();
g1.next().value.then(res => {
    console.log(res.toString());
    return g1.next().value;
}).then(res => {
    console.log(res.toString());
    return g1.next().value;
}).then(res => {
    console.log(res.toString());
});

 

3,使用Async的方式实现

const fs = require('fs');

function readfile(pathname) {
    return new Promise((resolve, reject) => {
        fs.readFile(pathname, (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        });

    });
}
async function asy() {
    let a = await readfile('data/1.txt');
    let b = await readfile('data/2.txt');
    let c = await readfile('data/3.txt');
    console.log(a.toString(), b.toString(), c.toString());
}
asy();

 

async特点

1,await要放在async函数体中

2,比generator更加语义化

3,await后面可以是promise对象,也可以是数字,字符串和布尔值

4,只要await语句后面的Promise状态变成reject,整个async函数会中断执行

 

如何解决async函数里面抛出错误,影响后续执行

async function asy() {
 try{
    let a = await readfile('data/1.txt');
    let b = await readfile('data/2.txt');
    let c = await readfile('data/3.txt');
    console.log(a.toString(), b.toString(), c.toString());
  }catch(e){} 
} 
asy(); 
  • 大小: 8.1 KB
分享到:
评论

相关推荐

    详解node Async/Await 更好的异步编程解决方案

    最近在学习 Puppeteer 的时候又发现另一种异步编程解决方案:Async/Await. 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。 从最早的回调函数,到 Promise 对象,再到 ...

    javascript异步编程的六种方式总结

    异步编程 众所周知 JavaScript 是单线程工作,也就是只有一个...异步编程传统的解决方案:回调函数和事件监听 初始示例:假设有两个函数, f1 和 f2,f1 是一个需要一定时间的函数。 function f1() { setTimeout(f

    javascript个人学习总结:包括数据结构与算法,前端工程化等方面,助你快速入门

    主要内容目录如下: 一。协作规范 中文技术文档协作规范(阮一峰) Javascript编程风格 凹凸实验室前端代码规范 vuejs风格指南 代码安全指南 二....zarm 基于react移动端组件...9k字 | Promise/async/Generator实现原理解析

    详解ES6之async+await 同步/异步方案

    关于异步方案, ES6 先是出现了 基于状态管理的 Promise,然后出现了 Generator 函数 + co 函数,紧接着又出现了 ES7 的 async + await 方案。 本文力求以最简明的方式来疏通 async + await。 异步编程的几个场景 先...

    JavaScript体验异步更好的解决办法

    JavaScript的异步操作一直是个麻烦事,所以不断有人提出它的各种解决方案。可以追溯到最早的回调函数(ajax老朋友),到Promise(不算新的朋友),再到ES6的Generator(强劲的朋友)。 几年前我们可能用过一个比较著名的...

    Javascript中的async awai的用法

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案。目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享async / await是如何工作的,阅读本文前,希望你...

    深入理解js 中async 函数的含义和用法

    异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂...

    es6学习笔记之Async函数的使用示例

    异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂...

    JavaScript进阶面试题_30题.pdf_前端面试题

    3. 异步编程的实现方式:有回调函数、事件监听、发布/订阅、Promise 对象、Generator 函数、async 函数等多种方式。每种方式都有其优缺点,需要根据实际情况选择合适的实现方式。 4. 面向对象编程思想:面向对象...

    sincronizando-o-codigo-javascript-com-callback-promise-generator-e-async-await-2021-03-10

    将JavaScript代码与回调,promise,生成器和异步/等待同步 对于在前端和后端使用JavaScript语言的用户来说,主要挑战之一就是应对它们的异步行为。 为此,至关重要的是要了解为什么存在回调以及如何通过承诺处理回调...

    Es6TestProject.zip

    自己总结的es6的新特性以及用法。包括:es6的Promise对象的用法和理解;Symbol的应用场景;iterator是一种接口机制,为各种不同的数据结构提供统一的访问...Generator 函数:ES6提供的解决异步编程的方案之一;async等

    rethinking-async-js:前端大师重新思考异步JavaScript,由Kyle Simpson教授

    重新思考异步js 前端大师重新思考异步JavaScript,由Kyle Simpson教授#Conver回调,thunk,promise,generator,async await和其他异步JS模式。

    leetcode力扣是什么-test:测试

    Promise,支持异步链式调用(20 行): [9] 手写 async await 的最简实现(20 行搞定): [10] axios 的源码: [11] ES6 系列之 Babel 将 Generator 编译成了什么样子: [12] Callback Promise Generator Async-Await 和...

    leetcode算法题主函数如何写-interview-question:Web前端开发者面试

    JavaScript异步编程(掌握原理) promise async/await(generator) setTimeout 原型和原型链 跨域 性能优化 webpack 项目 谈谈你对前端工程化的理解?(网易、字节) 从url输入到页面展示发生了什么? 手写代码 有些公司...

    resume-native:一个用原生js写的会动的简历

    可以切换到以下不同的分支来查看,简历生成过程中异步流程控制解决方案 master(使用回调函数处理) promise(使用promise处理) generator-thunk(使用generator + thunk函数处理) generator-promise(使用generator + ...

    leetcode答案-Interview:大前端开发面试题汇总收集,持续更新中~

    JavaScript异步的处理方式(回调、promise、generator、async) 手写promise的all方法 手写实现promise Es6 常用 es6 语法 使用es5实现es6的class CSS css选择器的优先级 css实现图片自适应宽高 flex,flex常用属性,...

    promise-pool:这个承诺池会一直循环Promise.all的承诺,直到最后一个生成器项提交给处理器。

    function * generatorFunction ( start , end ) { // Could be an async generator for ( let i = start ; i <= end ; i += 1 ) { yield i ; }}function processor ( generatorValue ) { // Could be an async ...

    JSConfArmenia-2017:JavaScript Conference亚美尼亚2017的源代码和幻灯片

    JSConf亚美尼亚-2017 ... 介绍一个使用fs模块的应用程序,该模块以所有异步类型(回调,promise,generator,async / await)编写。 进行异步编程时可能发生的问题以及如何处理它们 幻灯片: : 二手货源

    blog:欢迎来到Devin的博客,我正努力成为一名全栈开发人员,并坚持使用它!!!

    前端系列JAVASCRIPT【Javascript】彻底捋清楚javascript中 new 运算符的实现【Javascript】深入理解async/await的实现,Generator+Promise = Async/Await【Javascript】解决由于参数编码问题导致服务端报500 (如:...

    ECMAScript-6标准入门(第三版).zip

    ES6是下一代JavaScript语言标准的统称,本书为中级难度,适合那些已经对JavaScript语言有一定了解的读者,可以作为学习这门语言最新进展的工具书,也可以作为参考手册供大家随时查阅新语法。 第3版增加了超过30%的...

Global site tag (gtag.js) - Google Analytics