javascript 异步编程详解

同步 vs 异步

同步：代码按顺序执行。

异步：不阻塞后续代码执行。

回调函数

传统异步方式。

function fetchData(callback) {
  setTimeout(() => {
    callback('data')
  }, 1000)
}

fetchData((data) => {
  console.log(data)
})

回调地狱

fetchData((data1) => {
  fetchData2(data1, (data2) => {
    fetchData3(data2, (data3) => {
      // ...
    })
  })
})

Promise

解决回调地狱。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('data')
  }, 1000)
})

promise.then(data => {
  console.log(data)
}).catch(error => {
  console.error(error)
})

Promise 链式调用

fetchData()
  .then(data => processData(data))
  .then(result => displayResult(result))
  .catch(error => handleError(error))

async/await

更简洁的语法。

async function fetchData() {
  try {
    const data = await new Promise(resolve => {
      setTimeout(() => resolve('data'), 1000)
    })
    console.log(data)
  } catch (error) {
    console.error(error)
  }
}

并发处理

// 并行执行
const promises = [fetch1(), fetch2(), fetch3()]
Promise.all(promises).then(results => {
  // 所有完成
})

// 竞态
Promise.race(promises).then(result => {
  // 第一个完成
})

总结

异步编程是 javascript 核心。多练习 Promise 和 async/await，避免回调地狱。