JavaScript Promise理解

定义

  首先需要明确的是,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 没实现,这相当于是出错误了,所以它会把报错的信息作为参数传递出去。

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

时间: 2024-10-18 18:51:18

JavaScript Promise理解的相关文章

拆开 JavaScript Promise 理解一波再组装起来

准备好材料.工具,开拆!!! 一个 Promise 的运用: var firstPromise = new Promise(function(resolve,reject){ setTimeout(function(){ var result = Math.random() <= 0.5 ? 1:0; if(result){ resolve('resolved'); }else{ reject('rejected') } },1000) }) var secondPromise = new Pr

javaScript Promise 入门

Promise是JavaScript的异步编程模式,为繁重的异步回调带来了福音. 一直以来,JavaScript处理异步都是以callback的方式,假设需要进行一个异步队列,执行起来如下: animate (ball1, 100, function () { animate (ball2, 200, function () { animate (ball3, 300, function () { animate (ball3, 150, function () { animate (ball2

【JavaScript】理解与使用Javascript中的回调函数

在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因为函数是第一类对象,我们可以在Javascript使用回调函数.在下面的文章中,我们将学到关于回调函数的方方面面.回调函数可能是在Javascript中使用最多的函数式编程技巧,虽然在字面上看起来它们一直一小段Javascript或者jQuery代码,但是对于许多开发者来说它任然是一个谜.在阅读本文

javascript深入理解js闭包(看了挺多的,感觉这篇比较透彻)

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

[Javascript] Promise

Promise 代表着一个异步操作,这个异步操作现在尚未完成,但在将来某刻会被完成. Promise 有三种状态 pending : 初始的状态,尚未知道结果 fulfilled : 代表操作成功 rejected : 代表操作失败 如果 Promise 操作 fulfilled 或者 rejected ,并且对应的处理函数被声明了,则该处理函数被调用. Promise vs 事件监听器(event listener) 事件监听器善于处理同一对象上重复发生的事情,例如按键.点击鼠标等.对于这些事

Javascript Promise 学习

Promise 就是处理异步的一个规范方法 a();b();alert("a");如果a() 里面有一个ajax 或者settimeout 那么alert("a") 会先跑这就是异步了.从前我们用一堆callBack函数来解决问题,但是这样写不好看.promise 的写法美丽多了依据上面的例子a().then(b).then(function(){alert("");})这样它会先跑完 a -> b - > alert("&

JavaScript Promise异步实现章节的下载显示

Links: JavaScript Promise:简介 1.一章一章顺序地下载显示下载显示 使用Array.reduce()和Promise.resolve()将各章的下载及显示作为整体串联起来. [下载][显示]串联再串联. promise.resolve().[then().then()].[then().then()].... => 串联2.各章节分别下载完成后,才再一章一章显示 使用Array.map()将各章的下载并行起来,用Promise.all()将结果合并一处,然后再一章一章地

JavaScript Promise启示录

本篇,主要普及promise的用法. 一直以来,JavaScript处理异步都是以callback的方式,在前端开发领域callback机制几乎深入人心.在设计API的时候,不管是浏览器厂商还是SDK开发商亦或是各种类库的作者,基本上都已经遵循着callback的套路. 近几年随着JavaScript开发模式的逐渐成熟,CommonJS规范顺势而生,其中就包括提出了Promise规范,Promise完全改变了js异步编程的写法,让异步编程变得十分的易于理解. 在callback的模型里边,我们假

【JavaScript】JavaScript Promise 探微

http://www.html-js.com/article/Promise-translation-JavaScript-Promise-devil-details 原文链接:JavaScript Promises … In Wicked Detail 我在 JavaScript 中使用 Promise 已经有一段时间了,目前我已经能高效的使用这一开始让我晕头转向的 东西.但真要细说起来,我发现还是不能完全理解它的实现原理,这也正是本文写作的目的所在.如果诸位读者也处在一知半解的状态,那请读完