JavaScript ES6 async/await的简单学习demo

张迁发布于2019-08-26 13:30 / 2860人阅读

摘要：传统回调函数现在我们要做个事情，写个回调函数，每秒输出一个递增的数字，输出三次普通回调函数的写法现在调用它现在我们改用来重写的函数我们在这里暴露那个以供调用现在使用它这里把这个暴露出去以供使用，记得把本的调用函数注释掉就是行注释掉

传统回调函数

// demo1-callback.js
/**
    现在我们要做个事情，写个回调函数，每秒输出一个递增的数字，输出三次
    普通回调函数的写法
 */
function logNumber(n, callback){
    setTimeout(() => {
        console.log(n);
        n++;
        callback(n)
    }, 1000);
}
//  现在调用它
logNumber(1, function(n){
    logNumber(n, function(m){
        logNumber(m, function(q){
            
        })
    })
})

Promise

// demo2-promise.js
/**
    现在我们改用promise来重写demo1的函数
 */
// 我们在这里暴露那个promise以供demo3调用
function generatorLogNumber(n){
    return new Promise(res => {
        setTimeout(() => {
            console.log(n);
            n++;
            res(n)
        }, 1000);
    })
}
// 现在使用它
generatorLogNumber(1)
    .then(n => {
        generatorLogNumber(n)
        .then(m => {
            generatorLogNumber(m)
            .then(q => {

            })
        })
    })
// 这里把这个promise暴露出去以供demo3使用，记得把本demo的调用函数注释掉（就是15-24行注释掉）
module.exports = generatorLogNumber;

async/await

// demo3-async-await.js
/**
    现在我们改用更加方便的async/await方式来调用demo2的promise
 */
//  首先把那个promise引入进来
const generatorLogNumber = require("./demo2-promise.js");

(async () => {//双括号表示立即执行的匿名函数
    const n = await generatorLogNumber(1);
    const m = await generatorLogNumber(n);
    const q = await generatorLogNumber(m);
})()
// 可以node demo3-async-await.js 来运行看看

海外云主机私有云 async await 简单的javascript 简单的深度学习最简单的深度学习

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

转载请注明本文地址：https://www.ucloud.cn/yun/108954.html

ES6系列文章异步神器async-await

摘要：有两个陌生的关键字，同时函数执行结果似乎返回了一个对象。用来表示函数是异步的，定义的函数会返回一个对象，可以使用方法添加回调函数。如果的是对象会造成异步函数停止执行并且等待的解决如果等的是正常的表达式则立即执行。视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-a...

miqt 2019-08-21 17:00 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
ES6 系列之我们来聊聊 Async

摘要：标准引入了函数，使得异步操作变得更加方便。在异步处理上，函数就是函数的语法糖。在实际项目中，错误处理逻辑可能会很复杂，这会导致冗余的代码。的出现使得就可以捕获同步和异步的错误。如果有错误或者不严谨的地方，请务必给予指正，十分感谢。 async ES2017 标准引入了 async 函数，使得异步操作变得更加方便。在异步处理上，async 函数就是 Generator 函数的语法糖。 ...

Songlcy 2019-08-23 12:30 评论0 收藏0
ES6 Async/Await 完爆Promise的6个原因

摘要：以往的异步方法无外乎回调函数和。当然，对这个新特性也有一定的担心，体现在他使得异步代码变的不再明显，我们好不容易已经学会并习惯了使用回调函数或者来处理异步。自从Node的7.6版本，已经默认支持async/await特性了。如果你还没有使用过他，或者对他的用法不太了解，这篇文章会告诉你为什么这个特性不容错过。本文辅以大量实例，相信你能很轻松的看懂，并了解Javascript处理异步的...

shevy 2019-08-20 15:47 评论0 收藏0