Promise的用法解析

最新推荐文章于 2025-10-22 16:11:38 发布

原创

最新推荐文章于 2025-10-22 16:11:38 发布 · 654 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Promise是ES6之后新增的一个重要知识点（也可以说是最重要的知识点之一），是每个前端开发都必须要掌握的知识点。
本章中我们将详细学习下Promise的各种用法

一. 认识Promise

1.1 异步回调处理

我们这里用一个实际的例子来切入：

我们调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟）；
如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去；
如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息；

比如我们将网络请求封装到一个request.js的文件中：

// request.js
function requestData(url) {
   
   
  setTimeout(() => {
   
   
    if (url === "http://coderwhy.org") {
   
   
      // 发送成功了
      console.log("发送成功==========");
    } else {
   
   
      // 发送失败了
      console.log("发送失败==============");
    }
  }, 1000);
}

requestData("http://www.baidu.com");

我们将面临两个问题：

如果我们请求成功了，如何告知调用者成功了
如果我们请求失败了，如何告知调用则失败了

在传统的代码中我们有一种方式：回调函数

// request.js
function requestData(url, successCallback, failureCallback) {
   
   
  setTimeout(() => {
   
   
    if (url === "http://coderwhy.org") {
   
   
      // 发送成功了
      successCallback("一组数据");
    } else {
   
   
      // 发送失败了
      failureCallback("请求url错误");
    }
  }, 1000);
}

requestData(
  "http://www.baidu.com",
  (res) => {
   
   
    console.log("请求成功 :", res);
  },
  (err) => {
   
   
    console.log("请求失败：", err);
  }
);

执行结果:
在这里插入图片描述

1.2 什么是Promise

在上面的解决方案中，我们确实可以将执行通过回调函数告知调用法，但是存在链各个主要的问题：

我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等
对于不同的人，不同的框架设计出来的方案是不一样的，那么我们必须耐心去看别人的源码或者文档，以便可以理解它这个函数到底怎么用

我们来看一下Promise的API是怎么样的：

Promise是一个类，可以翻译成 承诺、许诺 、期约；
当我们需要给予调用者一个承诺：待会儿我会给你回调数据时，就可以创建一个Promise的对象
在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor
- 这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject；
- 当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数
- 当我们调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数

const promise = new Promise((resolve, reject) => {
   
   
  // 调用resolve, 那么then传入的回调会被执行
  resolve("哈哈哈");
  // 调用reject, 那么catch传入的回调会被执行
  reject("错误信息");
});

promise
  .then((res) => {
   
   
    console.log(res);
  })
  .catch((err) => {
   
   
    console.log(err);
  });

上面的Promise使用过程，我们可以将它划分为三个状态

待定（Pending）：初始状态，既没有被兑现，也没有被拒绝
- 当执行executor中的代码时，处于该状态；
已兑现（fulfilled）: 意味着操作成功完成
- 执行了resolve时，处于该状态；
已拒绝（rejected）: 意味着操作失败
- 执行了reject时，处于该状态

1.3 Promise重构

那么有了Promise，我们就可以将之前的代码进行重构了：

// request.js
function requestData(url) {
   
   
  return new Promise((resolve, reject) => {
   
   
    setTimeout(() => {
   
   
      if (url === "http://coderwhy.org") {
   
   
        // 发送成功了
        resolve("一组成功数据");
      } else {
   
   
        // 发送失败了
        reject("请求url错误");
      }
    }, 1000);
  });
}

// main.js
const promise = requestData("http://coderwhy.org");
promise
  .then((res) => {
   
   
    console.log(res);
  })
  .catch((err) => {
   
   
    console.log(err);
  });

执行结果：
在这里插入图片描述

二. Promise对象方法

2.1. Executor

Executor是在创建Promise时需要传入的一个回调函数，这个回调函数会被立即执行，并且传入两个参数：

new Promise((resolve, reject) => {
   
   
  console.log("executor代码")
})

通常我们会在Executor中确定我们的Promise状态：

通过resolve，可以兑现（fulfilled）Promise的状态，我们也可以称之为已决议（resolved）；
通过reject，可以拒绝（reject）Promise的状态；

注意：一旦状态被确定下来，Promise的状态会被锁死，该Promise的状态是不可更改的

在我们调用resolve的时候，如果resolve传入的值本身不是一个Promise，那么会将该Promise的状态变成 兑现（fulfilled）；
在之后我们去调用reject时，已经不会有任何的响应了（并不是这行代码不会执行，而是无法改变Promise状态）；

const promise = new Promise((resolve, reject) => {
   
   
  // 调用resolve, 那么then传入的回调会被执行
  resolve("哈哈哈");
  // 调用reject, 那么catch传入的回调会被执行
  reject("错误信息");
});

promise
  .then((res) => {
   
   
    console.log(res);
  })
  .catch((err) => {
   
   
    console.log(err);
  });

执行结果：
在这里插入图片描述

如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态：

new Promise((resolve, reject) => {
   
   
  resolve(new Promise((resolve

最低0.47元/天解锁文章