Promise与Async/Await：异步编程的艺术

空白诗

发布于 2024-06-14 18:16:42

730

发布于 2024-06-14 18:16:42

文章被收录于专栏：【JavaScript】【全栈开发之路】【JavaScript】

Promise与Async/Await 🚀

JavaScript中的两个重要概念——Promise和Async/Await，它们是我们处理异步编程时不可或缺的工具，让我们能够更优雅地驾驭回调地狱 💀。

🌟 Promise

一个Promise对象代表了一个现在、将来或永远可能可用，也可能不可用的值。它有三种状态：pending（进行中）、fulfilled（已成功）或rejected（已失败）。

// 创建一个Promise实例
const myPromise = new Promise((resolve, reject) => {
  if (/* 异步操作成功 */) {
    resolve('Success! 😃');
  } else {
    reject('Failed! 😔');
  }
});

// 使用then方法处理成功或失败的结果
myPromise.then(result => console.log(result)) // 输出: 'Success! 😃'
  .catch(error => console.log(error));       // 如果失败，输出: 'Failed! 😔'

🌟 Async/Await

Async/Await是ES2017引入的新特性，它是基于Promise的语法糖，使得异步代码看起来更像同步代码，更加易读易懂。

// 定义一个异步函数
async function fetchInfo() {
  try {
    const response = await fetch('https://api.example.com/data'); // 等待fetch请求完成
    const data = await response.json(); // 再等待解析JSON数据
    console.log('Data fetched successfully! 😎', data);
  } catch (error) {
    console.error('Error fetching data! 😱', error);
  }
}

// 调用异步函数
fetchInfo();

在上面的代码中，async关键字声明了一个异步函数，await关键字用于等待Promise的结果。如果Promise成功，它将返回结果；如果失败，则抛出异常，可以被catch捕获。

总结起来，Promise像是封装了异步操作的盒子，而Async/Await则是打开这个盒子并取出结果的钥匙🔑。两者结合，极大地改善了JavaScript异步编程的体验，让我们的代码变得更加清晰、简洁和易于维护。🎉

🧐 深入Promise

链式调用 & 链式处理

Promise的一个强大之处在于它可以进行链式调用，通过.then()和.catch()方法将多个异步操作串联起来，形成一个执行流程。

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('First Step'), 1000); // 模拟异步操作
});

firstPromise
  .then(result => console.log(result)) // 输出: 'First Step'
  .then(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve('Second Step'), 500);
    });
  })
  .then(result => console.log(result)) // 输出: 'Second Step'
  .catch(error => console.log(error)); // 处理错误

Promise.all() 和 Promise.race()

Promise.all(iterable)接受一组Promise并返回一个新的Promise，只有当所有 Promise 都成功时才会变为 resolved ，否则只要有任意一个 Promise 失败则整体失败。

let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, "foo"]
});

Promise.race(iterable)同样接受一组Promise，只要有一个 Promise 率先改变状态（无论是 fulfilled 还是 rejected ），那么 race 方法返回的 Promise 也会立刻改变状态并返回那个率先改变状态的 Promise 的结果。

let p1 = new Promise((resolve, reject) => setTimeout(reject, 500, 'p1'));
let p2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'p2'));

Promise.race([p1, p2]).then(
  value => console.log(value), 
  reason => console.log(reason)
); // 输出: 'p2'，因为p2先完成

🔍 深入Async/Await

📚 try/catch块内的await

在async函数内部，任何返回Promise的表达式都可以放在await后面，它会暂停函数执行，直到Promise完成。如果Promise被reject，那么await表达式将会抛出一个异常，可以在try/catch块内捕获。

async function asyncFunction() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

📒 Async/Await与Promise的转换

Async函数实际上会返回一个Promise，这意味着我们可以用Promise的方法来处理其结果。

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

getData().then(data => console.log(data)); // 直接使用Promise的then方法处理结果

🧪 深入Promise的高级特性与应用场景

Promise.resolve() 和 Promise.reject()

这两个静态方法可以帮助我们快速创建已确定状态的Promise对象。

// 创建一个立即resolve的Promise
let resolvedPromise = Promise.resolve('Resolved immediately!');

resolvedPromise.then(result => console.log(result)); // 输出: 'Resolved immediately!'

// 创建一个立即reject的Promise
let rejectedPromise = Promise.reject(new Error('Rejected immediately!'));

rejectedPromise.catch(error => console.log(error.message)); // 输出: 'Rejected immediately!'

Promise.prototype.finally()

finally方法允许我们在Promise无论最终状态如何（resolved或者rejected）都会执行的回调函数，通常用来做资源清理等操作。

let someAsyncWork = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Async work done!');
  }, 1000);
});

someAsyncWork()
  .then(result => console.log(result))
  .catch(error => console.log(error))
  .finally(() => console.log('This will always run regardless of the outcome')); // 总是会被执行

💡 深入Async/Await的高级用法

Async/Await配合for循环与数组迭代

Async/Await可以很好地配合for循环以及数组的各种迭代方法（如map, reduce, forEach等）来处理批量异步任务。

async function processUrls(urls) {
  for (const url of urls) {
    try {
      let response = await fetch(url);
      let data = await response.json();
      console.log(`Fetched data from ${url}:`, data);
    } catch (error) {
      console.error(`Failed to fetch data from ${url}:`, error);
    }
  }
}

processUrls(['https://api.example1.com/data', 'https://api.example2.com/data']);

🪐 总结

Promise与Async/Await都是JavaScript中处理异步操作的重要工具，它们都旨在解决回调地狱的问题，提高代码的可读性和可维护性。以下是它们的主要区别：

语法风格：
- Promise 采用链式调用的方式，通过.then()和.catch()方法来指定成功和失败的回调函数，连续的异步操作可能会导致多层嵌套。
- Async/Await 则引入了新的语法特性，使得异步代码看起来更像是同步代码，通过async关键字标记函数，并在函数内部使用await关键字等待Promise的结果。这样可以避免回调函数的嵌套，使得代码更加扁平化和易读。
错误处理：
- Promise 必须通过.catch()方法来处理错误，如果不这样做，未捕获的错误会在Promise链中传播。
- Async/Await 允许使用传统的try...catch结构来处理错误，这使得错误处理逻辑更加直观和易于理解。
代码组织与流程控制：
- Promise 可以利用.all()、.race()等静态方法同时处理多个异步操作，而Async/Await在处理多个异步任务时通常需要借助循环或其他结构来实现类似的并行效果。
- Async/Await 能够更好地模拟同步代码流程，可以在单个函数内部顺序执行多个异步操作，逻辑更清晰。
底层机制：
- Async/Await 是基于Promise构建的，也就是说，await后面接的表达式必须是Promise对象，如果不是，则会被转换为已解决的Promise。因此，Async/Await实际上是Promise API的语法糖，它让异步编程体验更为流畅。
兼容性与适用场景：
- Promise 是ES6标准的一部分，现代浏览器和Node.js环境对其有广泛支持，对于旧版环境可以通过polyfill添加支持。
- Async/Await 是ES7(ES2017)引入的特性，同样需要现代环境支持，尽管相对较新，但它由于其简洁的语法和更好的可读性，在许多项目中被优先选用。