小言_互联网的博客

04 Promise的理解(Ajax)

350人阅读  评论(0)

目录

一、Promise是什么?

二、Promise语法

 1.Promise的catch方法(捕获promise失败的时候的操作)

2.Promise中all与race方法

三、Promise工作原理


一、Promise是什么?

Promise,英文是许诺的意思,在Ajax中可理解为一件没有完成的事情,但是一定有结果的。

Promise是用来解决回调地狱问题的。

详情看下面的例子(类似于这种层层嵌套的语法结构我们称作为回调地狱)

代码的层级开始层层递减这样的结构我们称之为回调地狱(层级多不方便修改与维护,看起来也难受)


为了解决这种回调地狱的问题,因此引入了Promise

结构如下:

控制台查看,这样与第一种结果是一样的,但是这样写代码更加美观与可控性

如何解决的?

本质上来说是将第一次调用的返回值作为下次的调用者来用

二、Promise语法


  
  1. <! DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. // 流程:1.创建实例对象
  12. const p = new Promise((resolve, reject) => {
  13. setTimeout(() => {
  14. if (1 > 0) {
  15. resolve('ok')
  16. } else {
  17. reject('not')
  18. }
  19. }, 1000)
  20. })
  21. // 2.调用实例化对象,成功输出1/ok,错误输出2/not
  22. p.then(res => {
  23. console.log(res);
  24. console.log(1);
  25. }, err => {
  26. console.log(err);
  27. console.log(2);
  28. })
  29. </script>
  30. </body>
  31. </html>

控制台查看,上面对了走resolve(),输出的ok1,如果上面if判断错误则走reject()err输出not2


 1.Promise的catch方法(捕获promise失败的时候的操作)

 比如看这里,没有执行21行的代码,会直接直接下面错误的catch里面的函数

2.Promise中all与race方法


  
  1. <! DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
  11. <script>
  12. const p1 = axios.get('http://ajax-api.itheima.net/api/province')
  13. const p2 = axios.get('http://ajax-api.itheima.net/api/city?pname=湖北省')
  14. const p3 = axios.get('http://ajax-api.itheima.net/api/area?pname=湖北省&cname=武汉市')
  15. // all方法:把多个promise方法合并成为一个promise对象
  16. const pAll = Promise.all([p1, p2, p3])
  17. pAll.then(res => {
  18. // 对象是个数组,数组中的每一个元素就是promise的结果。
  19. // 利用了数组的有序性
  20. console.log(res);
  21. })
  22. /* race方法:也是多个合并成为一个promise,数组里面的任意一个promise
  23. 执行完了就会执行那一个,其他的不执行 */
  24. const pRace = Promise.race([p1, p2, p3])
  25. pRace.then(res => {
  26. console.log(res);
  27. })
  28. </script>
  29. </body>
  30. </html>

控制台查看:

all方法是获取了全部的Promise并且一起装进了一个对象数组中,而race方法更像是比较网速,先获取到哪一个Promise就输出哪一个Promise。

三、Promise工作原理

Promise对象有三种状态:

①pending进行中:一创建Promise,默认状态就是pending状态,会立刻执行promise状态

 

 ②fufilled成功状态:当我传值进去,如果是resolve则,Promise的状态将会从pending转换成fufilled状态(成功状态)

 

 ③rejected失败状态:如果是resolve则,Promise的状态将会从pending转换成rejected状态(失败状态)

 核心要点:

Promise是ES6新增的一个语法,是用来解决回调地狱的问题。

Promise的状态变化只有两种:

如果异步操作成功一般会执行resolve()方法,Promise的状态将会从pending转换成fufilled状态(成功状态)。

当异步操作失败的时候会执行reject()方法,Promise的状态将会从pending转换成rejected状态(失败状态)


转载:https://blog.csdn.net/m0_61118311/article/details/128390493
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场