使用nodeAPI时遇到过异步问题解决

来源：jb51　　时间：2023/1/30 15:19:57　　对本文有异议

问题

闲逛技术群时常常看到群友遇到异步问题, 这里就最近看到的问题做个解答:

问题大致是这样:

下面这段代码, 是希望输出456的, 但实际上却输出了[], 因为readFile的回调会等到文件读取完成才会执行, readFile不会阻塞代码运行, 因此return demo会先执行, 此时demo值为[].

const fs = require('fs')
const readFileFn = () => {
	let demo = []
  fs.readFile('./config.json', async function (err, date) {
    Promise.all([Promise.resolve(() => 456)]).then(res => {
      demo = res
    })
  })
  return demo
}
console.log('end', readFileFn()) // 要输出456

很典型的异步问题, 解决方法也由不少, 我们来探讨一下:

既然readFile提供回调函数来执行读完文件后的操作, 我们同样可以提供回调函数来执行readFile结束后的操作:

const fs = require('fs')
const readFileFn = (callback) => {
  fs.readFile('./config.json', async function (err, date) {
    Promise.all([Promise.resolve(456)]).then(res => {
      callback(res)
    })
  })
}
readFileFn(data => console.log(data)) // [ 456 ]

现代JS编程似乎更倾向于Promise风格, 同时我们结合async/await可以进一步简化代码

const fs = require('fs')
const readFileFn = async () => {
  const [result] = await Promise.all([
    new Promise(resolve => fs.readFile('./config.json', (err, data) => resolve(456))),
  ])
  return result
}
readFileFn().then(res => console.log(res)) // 456

这里我们创建了一个Promise, 在readFile的回调函数执行时我们resolve它, 这时Promise才算结束

我们还可以之间让readFileFn返回一个Promise

const readFileFn = () => {
  return new Promise(resolve => {
    fs.readFile('./config.json', async function (err, date) {
      Promise.all([Promise.resolve(456)]).then(res => {
        resolve(res)
      })
    })
  })
}
readFileFn().then(console.log) // [456]
// readFileFn().then(res => console.log(res))