JavaScript Promise 用法

首先让我们先来了解一下JavaScript Promise的概念。

什么是Promise

Promise是JavaScript 一个非常重要的异步编程概念。它可以让我们处理异步操作更加简单、更加优雅，避免了回调地狱等问题。Promise 本质上是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

Promise 本身是一个对象，它有三种状态：初始状态（pending）、完成状态（fulfilled）和失败状态（rejected）。当Promise处于初始状态时，我们可以通过调用 resolve 函数改变它的状态，使Promise从初始状态转变为完成状态；同样地，当Promise处于初始状态时，我们也可以通过调用 reject 函数改变它的状态，使Promise从初始状态转变为失败状态。

有了Promise，我们可以使用链式调用的方式来组织异步代码，这种方式让代码更加清晰，易于理解。

Promise 用法攻略

下面是 Promise 的基本用法：

const promise = new Promise((resolve, reject) => {
  // 这里是异步处理的代码块
  if (/* 异步操作成功 */) {
    resolve(result); // 表示异步操作成功，并且 Promise 对象的状态将从“未完成”变为“已完成”
  } else {
    reject(error); // 表示异步操作失败，并且 Promise 对象的状态将从“未完成”变为“已失败”
  }
});

promise.then(result => {
  // 如果 Promise 对象的状态从“未完成”变为“已完成”，则会自动调用这里的代码块
}).catch(error => {
  // 如果 Promise 对象的状态从“未完成”变为“已失败”，则会自动调用这里的代码块
}).finally(() => {
  // 无论最终 Promise 对象的状态是成功或者失败，都会自动调用这里的代码块
});

以上就是 Promise 的最基本用法，下面我们来看两个示例，更加深入地理解 Promise 的用法。

示例一：获取用户信息

假设我们需要从服务器上获取一个用户的信息，代码如下：

const getUserInfo = (userId) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId === '123') {
        resolve({ name: '张三', age: 18 });
      } else if (userId === '456') {
        resolve({ name: '李四', age: 20 });
      } else {
        reject(new Error('无法找到该用户信息！'));
      }
    }, 1000);
  })
}

getUserInfo('123')
  .then(user => {
    console.log(user); // { name: '张三', age: 18 }
  })
  .catch(err => {
    console.error(err); // Error: 无法找到该用户信息！
  })

代码解释：首先我们定义了一个 getUserInfo 函数，它接收一个 userId 参数，返回一个 Promise 对象。在 Promise 对象的回调函数里面，我们进行了一个异步操作，通过 setTimeout 模拟了一个异步操作，在这个操作中我们根据传入的 userId 参数来模拟不同的用户信息。如果 userId 为 '123'，则返回一个对象 { name: '张三', age: 18 }；如果 userId 为 '456'，则返回一个对象 { name: '李四', age: 20 }；如果 userId 不是 '123' 或 '456'，则回调 reject 函数，返回一个错误对象。

接着我们使用 getUserInfo 函数，并通过 then 和 catch 方法来处理 Promise 的状态变化，如果 Promise 对象的状态从“未完成”变为“已完成”，则会自动调用 then 方法所对应的回调函数，并将 Promise 对象的状态改为“已完成”，同时将返回的结果传递给 then 方法所对应的回调函数；如果 Promise 对象的状态从“未完成”变为“已失败”，则会自动调用 catch 方法所对应的回调函数，并将 Promise 对象的状态改为“已失败”，同时将错误对象传递给 catch 方法所对应的回调函数。

当执行以上代码时，我们可以看到控制台输出了对象 { name: '张三', age: 18 }，这证明了我们成功地获取到了一个用户的信息。如果我们将 getUserId 函数传入的参数改为 '789'，则会输出一个错误信息，这说明我们成功地捕获到了 Promise 的错误。

示例二：并行执行多个异步任务

const task1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('任务一完成'), 1000)
})

const task2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('任务二完成'), 2000)
})

const task3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('任务三完成'), 3000)
})

Promise.all([task1, task2, task3]).then(results => {
  console.log(results); // ['任务一完成', '任务二完成', '任务三完成']
})

代码解释：这里我们定义了三个 Promise 对象 task1、task2、task3，分别模拟了三个不同的异步任务，每个任务的执行时间依次递增。接着我们通过 Promise.all 方法创建了一个新的 Promise 对象，并把三个任务作为 Promise.all 方法的参数传入，这样就可以在所有三个异步任务都完成后，自动调用 Promise.all 方法所对应的回调函数，并将三个返回结果作为 Promise.all 方法回调函数的参数，以数组的形式返回给我们。

当执行以上代码时，我们可以看到控制台输出了 ['任务一完成', '任务二完成', '任务三完成']，这证明了我们成功地并行执行了三个异步任务，并成功地获取了他们的执行结果。

以上就是 Promise 的用法攻略，希望对您有所帮助。