从基础到精通：手把手教你编写Promise

2024-01-13 20:43:32

从函数回调到事件循环，从Callback到Promise，JavaScript的异步编程一直都在不断演进。其中，Promise作为一个强大的异步编程工具，以其简洁、优雅的语法以及强大的功能，在前端开发中扮演着举足轻重的角色。

基础篇：什么是Promise？

Promise，中文译为“承诺”，它是一种表示异步操作的最终完成或失败状态的对象。当一个异步操作被触发时，Promise对象就会被创建，并处于“pending”状态。当操作完成后，Promise对象的状态会变为“fulfilled”或“rejected”，分别表示操作成功或失败。

进阶篇：Promise的使用方法

创建Promise对象

const promise = new Promise((resolve, reject) => {
  // 异步操作的具体实现
});

处理Promise对象的状态

promise.then((result) => {
  // 操作成功时的处理逻辑
}, (error) => {
  // 操作失败时的处理逻辑
});

链式调用

promise.then((result) => {
  return anotherPromise(result);
}).then((result) => {
  // 处理另一个Promise的结果
});

高级篇：Promise的常用方法

Promise.all

const promises = [promise1, promise2, promise3];

Promise.all(promises).then((results) => {
  // 所有Promise都成功完成时的处理逻辑
}, (error) => {
  // 任何一个Promise失败时的处理逻辑
});

Promise.race

const promises = [promise1, promise2, promise3];

Promise.race(promises).then((result) => {
  // 最先完成的Promise的结果
}, (error) => {
  // 任何一个Promise失败时的处理逻辑
});

Promise.resolve

const promise = Promise.resolve(value);

Promise.reject

const promise = Promise.reject(error);

实践篇：Promise在复杂场景中的应用

并行请求

const promises = [fetch('https://api.example.com/data1'), fetch('https://api.example.com/data2')];

Promise.all(promises).then((responses) => {
  // 处理所有请求的结果
});

竞争请求

const promises = [fetch('https://api.example.com/data1'), fetch('https://api.example.com/data2')];

Promise.race(promises).then((response) => {
  // 处理最先完成的请求的结果
});