首页 > web前端 > js教程 > 这并不难!了解 JavaScript 中的'Promise”

这并不难!了解 JavaScript 中的'Promise”

Susan Sarandon
发布: 2024-09-25 06:24:02
原创
1148 人浏览过

It’s not that hard! To understand `Promise` in javascript

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

承诺,你为何存在?

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

代码不再从上到下执行。

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

1

2

3

console.log(1)

console.log(2)

console.log(3)

登录后复制

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

1

2

3

1

2

3

登录后复制

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

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

承诺,神奇功效

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

承诺、组装说明

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

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

1

2

3

4

5

6

7

8

Promise(

  (resolve, _reject) => {

    setTimeout(() => {

      console.log(1)

      resolve()

    }, 300)

  }

)

登录后复制

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

完整代码

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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)

  }

)

登录后复制

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

1

2

3

3

2

1

登录后复制

Promise、并发模型

并发编程是关于如何在有限数量的CPU核心上模拟大量任务同时执行。 Javascript中的Promise提供了一种方便快捷的并发编程方式,以及一套处理返回值和错误值的规范。了解并熟悉这个规范后,我们可以大大提高处理并发任务的效率。

以上是这并不难!了解 JavaScript 中的'Promise”的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板