JavaScript Promise启示录

什么是Promise

Promise是JavaScript中的一种强大的异步编程工具，旨在解决常用的回调函数嵌套（callback hell）问题。Promise可以在pending(等待中)、fulfilled(已完成)和rejected(已失败)三种状态之间转换。

Promise基本语法

const promise = new Promise((resolve, reject) => {
  // 异步操作代码块
  // 成功时调用resolve，失败时调用reject
});

promise.then(() => {
  // 完成回调，promise成功时得到执行
}).catch(() => {
  // 拒绝回调，promise失败时得到执行
}).finally(() => {
  // 无论promise最终是成功还是失败都执行
});

Promise示例一: 实现异步请求数据

function getData() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://example.com/data');
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

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

Promise示例二: 处理多个Promise

const promise1 = new Promise(resolve => setTimeout(resolve, 2000, 'one'));
const promise2 = new Promise(resolve => setTimeout(resolve, 1000, 'two'));

Promise.all([promise1, promise2]).then(values => {
  console.log(values); // ["one", "two"]
}).catch(error => {
  console.error(error);
});

上述代码中，Promise.all()方法接收一个Promise数组。它将等待所有Promise解决并将解决值作为数组传递给完成回调。 如果数组中的任何Promise被拒绝，则将立即调用拒绝回调。

Promise进阶应用

Promise还有一些高级功能，例如（Race）竞赛、生成器和异步/ await。

• Promise.race(): 接收一个Promise数组作为参数，并解决第一个Promise；
• 生成器: 可以使用yield迭代逐步地返回Promise结果。
• 异步/await: 可以将异步操作看作是一个同步操作，使用与普通同步操作相同的语法来编写异步代码。

结论

Promise是JavaScript中提高异步编程的最佳工具之一，在处理回调函数嵌套和处理多个异步操作时特别有用。

参考链接：
- 深入浅出Promise(图解Promise原理)
- Promise - JavaScript | MDN