当前位置：首页 > 文章列表 > 文章 > 前端 > 这并不难！理解 JavaScript 中的“Promise”

这并不难！理解 JavaScript 中的“Promise”

来源：dev.to 2024-09-27 16:12:59 0浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《这并不难！理解 JavaScript 中的“Promise”》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

本文内容非常适合javascript初学者。会用简单易懂的语言来描述，不用担心看不懂。

承诺，你为何存在？

promise是学习现代javascript语言不可缺少的知识点。很多人读的时候都感到很困惑。主要原因可以用一句话来概括：

代码不再从上到下执行。

一般情况下，我们写的代码都是顺序执行的，比如我们写一段从1数到3的代码。

console.log(1)
console.log(2)
console.log(3)

按f12打开我们浏览器的控制台，将上面的代码复制进去，回车，可以看到数字1到3按顺序打印出来了。

1
2
3

现在，如果我们有一个要求，代码的顺序不能改变，但最终打印输出的顺序必须与代码的顺序无关，可以这样做吗？

我们想象一下，如果1、2、3分别由三个人打印，那么就非常简单了。我们只需要告诉他们同时打印数字的任务即可，打印的顺序只与任务的执行时间有关。

承诺，神奇功效

那么，我们如何将打印任务分配给三个人呢？这就是使用promise的地方。通过创建一个新的 promise 对象，我们可以将一段代码分配给一个新的“进程”，而不是在当前的“进程”上执行。注意，这里的“进程”和我们常说的操作系统进程并不相同，而只是一个抽象概念，代表一个按顺序执行代码的虚拟单元。

承诺、组装说明

正如我们刚才所说，promise它可以被视为一个新的“进程”，所以如果我们想让它执行任何代码，我们可以将其包装在一个函数中并交给它。这样代码就不会立即执行。

promise还为我们提供了两个函数，一个是resolve，另一个是reject，我们可以分别在任务完成和失败时调用。这两个函数作为参数传递给promise的内部。所以，我们可以像这样组装一个：

promise(
  (resolve, _reject) => {
    settimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)

这里我们使用settimeout来模拟一个耗时的任务。在实际场景中，此任务可能是读取文件、请求网络接口或等待用户输入。当任务完成后，我们调用resolve函数来表示任务已经完成。

完整代码

然后，我们按照同样的方法，promise在组装另外两个的时候，只需要向他们提供不同的打印数量和任务所需的时间即可。最后，完整的代码是这样的，大家可以尝试复制到控制台试试。

promise(
  (resolve, _reject) => {
    settimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)
new promise(
  (resolve, _reject) => {
    settimeout(() => {
      console.log(2)
      resolve()
    }, 200)
  }
)
new promise(
  (resolve, _reject) => {
    settimeout(() => {
      console.log(3)
      resolve()
    }, 100)
  }
)

最后，数字打印的顺序与任务的执行时间有关：