一盏茶的功夫帮你彻底搞懂JavaScript异步编程从回调地狱到async/await

在JavaScript中，处理异步代码常常涉及到回调函数，这会导致所谓的“回调地狱”(callback hell)。为了解决这个问题，ES6引入了Promise对象来更好地处理异步编程。而async/await是基于Promise的一种更优雅的异步编程方式。

以下是一个简单的例子，展示了如何从回调函数过渡到async/await：

// 使用回调函数的示例
fs.readFile('file1.txt', 'utf8', function(err, data) {
    if (err) throw err;
    console.log(data);
    fs.readFile('file2.txt', 'utf8', function(err, data) {
        if (err) throw err;
        console.log(data);
        fs.readFile('file3.txt', 'utf8', function(err, data) {
            if (err) throw err;
            console.log(data);
        });
    });
});
 
// 使用Promise的示例
fs.readFile('file1.txt', 'utf8')
  .then(data => {
    console.log(data);
    return fs.readFile('file2.txt', 'utf8');
  })
  .then(data => {
    console.log(data);
    return fs.readFile('file3.txt', 'utf8');
  })
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });
 
// 使用async/await的示例
const readFileAsync = filename => new Promise((resolve, reject) => {
  fs.readFile(filename, 'utf8', (err, data) => {
    if (err) reject(err);
    resolve(data);
  });
});
 
const main = async () => {
  try {
    const data1 = await readFileAsync('file1.txt');
    console.log(data1);
    const data2 = await readFileAsync('file2.txt');
    console.log(data2);
    const data3 = await readFileAsync('file3.txt');
    console.log(data3);
  } catch (err) {
    console.error(err);
  }
};
 
main();

在这个例子中，我们展示了从直接使用回调函数，到使用Promise对象，再到使用async/await的过程。可以看到，使用async/await的代码更加简洁，并且更加符合同步编程的风格，减少了嵌套，使得代码更易于理解和维护。