刚开始学 nodejs 的时候,被它的异步搞蒙了。并不像我们写 C 或者 Java 一样将前一步执行完才进行下一步。

举个例子:

// demo1
console.log('begin')

setTimeout(() => {
  console.log('1s')
}, 1000)

console.log('end')
begin
end
1s

不管运行多少次,结果都是一样的。

我预期的结果是下面这样的

begin
1s
end

那代码就要这么写

// demo2
console.log('begin')

setTimeout(() => {
  console.log('1s')
  console.log('end')
}, 1000)

为什么要这么写呢?因为setTimeout的第一个参数是一个异步回调函数

等等,异步?难道还有同步的回调函数吗?

有,我们看下异步和同步的两种回调函数

// demo3
const fs = require('fs')

let result1 = 'result1'
let result2 = 'result1'

// 异步读文件的函数
function readFile() {
  fs.readFile('./msyql.js', () => {
    result1 = 'readFile'
  })
  return result1
}

// 同步函数
function sync() {
  result2 = 'change'
  return result2
}

function func(cb) {
  return cb()
}

func(readFile)
func(sync)
console.log(result1) // result1
console.log(result2) // change

可能已经发现一个问题了。同步回调在这里好像并没有正在存在的必要,直接在调用前一个同步方法后面调用下一个同步方法就可以了。同步回调有助于我们更好的编写和阅读代码,这里先不提。那么剩下的是异步回调函数的作用。

异步回调函数是干嘛用的

异步回调函数是 nodejs 现实异步的方式,那么只有这种方式吗?当然不是,可以用events实现发布订阅的模式实现异步。

// demo4
const EventEmitter = new require('events').EventEmitter
const events = new EventEmitter()
console.log('begin')
events.on('done', (data) => {
    console.log(data)
})
setTimeout(() => {
    console.log('1s')
    events.emit('done', 'timeout')
    console.log('end')
}, 1000)
// begin
// 1s
// timeout
// end

但是 events 的形式,可能会因为 event name 过多,导致编码困难,并没有回调函数的方式灵活。

但是回调函数也有缺点,就是嵌套严重,也就是我们常说的回调地狱(不知道回调地狱的,自行搜索)。

有没有更优雅的方式使用 JavaScript 的异步呢?像写同步代码一样简单的方式?答案是有的。

Promise + async await

Promise 是为了解决回调地狱的一个解决方案。把原来的回调嵌套的方式使用链式的方式来执行。视觉上比回调函数好那么一点,但是本质其实还是回调函数,而且链式调用里面也是存在回调函数的。

我们把 demo2 改一下,使用 Promise 写,结果还是和 demo2 一样的。

// demo5
console.log('begin')

new Promise((resolve) => {
    setTimeout(() => {
        resolve('1s')
    }, 1000)
}).then((res) => {
    console.log(res)
}).then(() => {
    console.log('end')
})

当你把最后的 then 里面的 log 写到 Promise 的下面的时候,发现end会比1s先打印出来。

// demo6
console.log('begin')

new Promise((resolve) => {
    setTimeout(() => {
        resolve('1s')
    }, 1000)
}).then((res) => {
    console.log(res)
})
console.log('end')
// begin
// end
// 1s

所以还是和异步回调一样的,只是把 callback 写成 then 罢了。那有没有更好的方法呢?

有,async await

async await其实是 Promise 的语法糖。语法糖,就是用更优雅的写法来写之前看起来相对比较丑的语法的方式。就像药丸很苦,我们医生为了骗小孩吃下去,就在药丸外边涂上一层糖衣,小孩子以为是糖果就会吃药。

我们简单举个语法糖的例子,箭头函数与函数表达式。这两种方式除了this,基本上一致的。

const def = function () {
  console.log('default')
}

const arrow = () => {
  console.log('arrow')
}

我们用async await来改写一下 demo5

// demo7
console.log('begin')

const run = async()=>{
    const res = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('1s')
        }, 1000)
    })
    console.log(res)
    console.log('end')
}
run()

这样看起来就顺眼多了。当然有个要注意的地方,await必须写在async修饰的方法里面。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

再见 2019,你好 2020 上一篇
Archlinux Arango 安装 下一篇