JavaScript之Promise的使用【二】，掌握Promise的使用技巧，轻松玩转异步编程

2023-09-02 08:11:23

JavaScript 中 Promise 的巧妙应用：异步编程的优雅之选

简介

在 JavaScript 的异步编程中，Promise 扮演着至关重要的角色，它使开发者能够以更优雅、更可读的方式处理异步操作。本篇文章将深入探讨 Promise 的用法，包括如何利用 Promise.resolve()、Promise.reject()、Promise.all()、Promise.race()、Promise.then() 和 Promise.catch() 等方法来控制和处理异步操作。

Promise 的用法

1. Promise.resolve()

Promise.resolve() 方法创建一个新的 Promise 对象，并立即将其状态设置为成功（Fulfilled），同时传递一个值作为结果。这个值可以是任何类型的数据，包括另一个 Promise 对象。

const promise1 = Promise.resolve(42);
promise1.then(function(result) {
  console.log(result); // 输出：42
});

2. Promise.reject()

Promise.reject() 方法创建一个新的 Promise 对象，并立即将其状态设置为失败（Rejected），同时传递一个值作为错误原因。这个值可以是任何类型的数据，包括另一个 Promise 对象。

const promise2 = Promise.reject("Error occurred");
promise2.catch(function(error) {
  console.log(error); // 输出：Error occurred
});

3. Promise.all()

Promise.all() 方法接收一个包含多个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象的状态取决于传入的 Promise 对象的集合状态。如果所有传入的 Promise 对象都成功（Fulfilled），则新的 Promise 对象的状态也为成功（Fulfilled）；如果有一个或多个传入的 Promise 对象失败（Rejected），则新的 Promise 对象的状态也为失败（Rejected）。

const promise3 = Promise.all([promise1, promise2]);
promise3.then(function(result) {
  console.log(result); // 输出：[42, "Error occurred"]
}, function(error) {
  console.log(error); // 输出：Error occurred
});

4. Promise.race()

Promise.race() 方法接收一个包含多个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象的状态取决于传入的 Promise 对象的集合状态。只要有一个传入的 Promise 对象先成功（Fulfilled）或失败（Rejected），这个新的 Promise 对象的状态就确定为成功（Fulfilled）或失败（Rejected）。

const promise4 = Promise.race([promise1, promise2]);
promise4.then(function(result) {
  console.log(result); // 输出：42
}, function(error) {
  console.log(error); // 输出：Error occurred
});

5. Promise.then()

Promise.then() 方法允许开发者在 Promise 对象成功（Fulfilled）或失败（Rejected）时执行指定的操作。这个方法接收两个参数：成功回调函数和失败回调函数。

promise1.then(function(result) {
  console.log(result); // 输出：42
}, function(error) {
  console.log(error); // 输出：Error occurred
});

6. Promise.catch()

Promise.catch() 方法允许开发者在 Promise 对象失败（Rejected）时执行指定的操作。这个方法接收一个参数：失败回调函数。

promise2.catch(function(error) {
  console.log(error); // 输出：Error occurred
});

实际案例

1. 避免回调地狱

在传统的异步编程中，经常会遇到回调地狱的问题。回调地狱是指一个回调函数调用另一个回调函数，另一个回调函数又调用另一个回调函数，如此循环下去，导致代码变得难以理解和维护。Promise 的出现解决了这个问题，允许开发者使用更优雅、更易读的方式处理异步操作，避免回调地狱的发生。

传统方式，回调地狱

function getUser(userId, callback) {
  setTimeout(() => {
    const user = { id: userId, name: "John Doe" };
    callback(user);
  }, 2000);
}

function getPosts(userId, callback) {
  setTimeout(() => {
    const posts = [
      { id: 1, title: "Post 1", authorId: userId },
      { id: 2, title: "Post 2", authorId: userId },
    ];
    callback(posts);
  }, 2000);
}

getUser(1, function(user) {
  getPosts(user.id, function(posts) {
    console.log(user, posts); // 输出：{ id: 1, name: "John Doe" }, [{ id: 1, title: "Post 1", authorId: 1 }, { id: 2, title: "Post 2", authorId: 1 }]
  });
});

使用 Promise 的方式

function getUser(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: userId, name: "John Doe" };
      resolve(user);
    }, 2000);
  });
}

function getPosts(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const posts = [
        { id: 1, title: "Post 1", authorId: userId },
        { id: 2, title: "Post 2", authorId: userId },
      ];
      resolve(posts);
    }, 2000);
  });
}

getUser(1)
  .then(user => getPosts(user.id))
  .then(posts => {
    console.log(user, posts); // 输出：{ id: 1, name: "John Doe" }, [{ id: 1, title: "Post 1", authorId: 1 }, { id: 2, title: "Post 2", authorId: 1 }]
  });

2. 减少代码复杂度和提高可读性

Promise 的另一个优点是能够减少代码复杂度和提高可读性。在传统的方式中，异步操作通常会使用回调函数，而回调函数的嵌套会导致代码变得难以理解和维护。Promise 的出现解决了这个问题，允许开发者使用链式调用来处理异步操作，使代码更具条理和可读性。

传统方式，回调函数嵌套

function getUser(userId, callback) {
  setTimeout(() => {
    const user = { id: userId, name: "John Doe" };
    callback(user, function(posts) {
      setTimeout(() => {
        console.log(user, posts); // 输出：{ id: 1, name: "John Doe" }, [{ id: 1, title: "Post 1", authorId: 1 }, { id: 2, title: "Post 2", authorId: 1 }]
      }, 2000);
    });
  }, 2000);
}

getUser(1, function(user, callback) {
  getPosts(user.id, callback);
});

使用 Promise 的方式，链式调用

function getUser(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: userId, name: "John Doe" };
      resolve(user);
    }, 2000);
  });
}

function getPosts(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const posts = [
        { id: 1, title: "Post 1", authorId: userId },
        { id: 2, title: "Post 2", authorId: userId },
      ];
      resolve(posts);
    }, 2000);
  });
}

getUser(1)
  .then(user => getPosts(user.id))
  .then(posts => {
    console.log(user, posts); // 输出：{ id: 1, name: "John Doe" }, [{ id: 1, title: "Post 1", authorId: 1 }, { id: 2, title: "Post 2", authorId: 1 }]
  });