码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript Promise理解

时间:2019-05-30 18:11:24      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:解释   成功   font   状态   机制   转换   OLE   The   cte   

定义

  首先需要明确的是,Promise 是异步的。JS 异步操作是通过 JS 的事件循环机制 EventLoop 实现的。  

  MDN Web Doc 对 Promise 的解释: Promise 对象是一个代理对象(代理一个值),被代理的值在 Promise 对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的 Promise 对象。

  promise 对象有三个状态:

  1、pending(待定的)

  2、fulfilled(已解决/以实现)

  3、rejected(已拒绝/没有实现)

  pending 可以单向转换成 fulfilled ,也可以单向转换成 rejected,但 fulfilled 和 rejected 之间不能转换。

  怎么去理解呢?下面通过一个故事来阐述。

故事

  小王今年上六年级,面临着小升初的压力,所以作业有时会有点多,但小王好像出去玩。

  爸爸今天带来了一个好消息,他给小王承诺(Promise)说,如果周末不下雨,就带小王去动物园。

  于是,小王天天在祈祷着周末不下雨(penging)。

  可能一: 周末不下雨,小王就可以去动物园啦(fulfilled)。

  可能二:下雨了,小王只能待在家做作业(rejected)。

示例

 1 //用一个布尔值表示是否下雨
 2 let ifRain = true;
 3 
 4 let goToZoo = new Promise(function (resolve, reject) {
 5     //如果不下雨,就去动物园
 6     if (!ifRain) {
 7         let message = "go to zoo";
 8         resolve(message);
 9     }
10     //下雨就做作业
11     else {
12         let message = new Error("do homework");
13         reject(message);
14     }
15 });
16 
17 let test = function () {
18     goToZoo.then(function (fulfilled) {
19         console.log(fulfilled);
20     }).catch(function (rejected) {
21         console.log(rejected.message);
22     })
23 };
24 
25 test();

  当 ifRain 是 true 时,输出 do homework;是 false 时,输出 go to zoo 。

  这边 Promise 的用法是:

  new Promise( function(resolve, reject) {...} /* executor */  );

  这里的 resolve 、reject 参数是函数,当承诺实现了的时候,就会调用 resolve 函数,然后对应的 Promise 的状态就变成 fulfilled;当承诺没有实现的时候,就会调用 reject 函数,其状态变成了 rejected。

  executor 也是一个函数。resolve 和 reject 是作为 executor 的参数被传进去的,当然这两个参数是可选填的。resolve 或 reject 如果被调用了就会把函数里的结果作为参数传递出去;resolve 说明 Promise 实现了,它会把函数里的结果传递出去,而 reject 就说明是 Promise 没实现,这相当于是出错误了,所以它会把报错的信息作为参数传递出去。

 

JavaScript Promise理解

标签:解释   成功   font   状态   机制   转换   OLE   The   cte   

原文地址:https://www.cnblogs.com/tianwen1993/p/10950789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!