JavaScript ES6 async/await的簡單學習demo

張遷發布于2019-08-26 13:30 / 2965人閱讀

摘要：傳統回調函數現在我們要做個事情，寫個回調函數，每秒輸出一個遞增的數字，輸出三次普通回調函數的寫法現在調用它現在我們改用來重寫的函數我們在這里暴露那個以供調用現在使用它這里把這個暴露出去以供使用，記得把本的調用函數注釋掉就是行注釋掉

傳統回調函數

// 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 來運行看看

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/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