JavaScript ES6 async/await的简单学习demo

42次阅读

共计 941 个字符,预计需要花费 3 分钟才能阅读完成。

传统回调函数
// 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 来运行看看

正文完
 0