异步编程概述

JavaScript是单线程语言，但它通过异步编程机制来处理耗时操作，如网络请求、文件读写等。

回调函数

最原始的异步编程方式：

function fetchData(callback) {
  setTimeout(() => {
    callback('数据');
  }, 1000);
}

fetchData(function(data) {
  console.log(data);
});

回调地狱问题：

getData(function(a) {
  getMoreData(a, function(b) {
    getMoreData(b, function(c) {
      // 嵌套层级太深
    });
  });
});

Promise

ES6引入的异步解决方案：

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

promise
  .then(result => console.log(result))
  .catch(error => console.error(error));

链式调用：

fetch('/api/user')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

async/await

ES2017引入的语法糖：

async function fetchUser() {
  try {
    const response = await fetch('/api/user');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

总结

  • 回调函数是最原始的方式，但容易造成回调地狱
  • Promise提供了更优雅的链式调用
  • async/await让异步代码看起来像同步代码