Promise初体验

/**

* 一.Promise诞生了

* promise是什么?

* 承若,许诺---用于异步计算,可以将异步操作队列化;按照预期的顺序执行,返回符合预期的结果;可以在对象之间传递和操作promise,帮助我们处理队列。

* 异步产生的原因?

* 1.JS里很多操作是异步的(异步和同步的区别),异步操作的常见语法(事件执行与监听addEventListener; 回调,例如ajax)

* 2.浏览器中的异步操作

* 3.Node.js的出现---无阻塞和高并发,异步操作是保证,大量操作依赖回掉函数

* 异步回调的问题

* 1.嵌套层次很深,难以维护; 2.无法正常使用return和throw; 3.无法正常检索堆栈信息; 4.多个回调之间难以建立联系

* 二.Promise入门

* 详解

* Promise是一个代理对象,它和原先要进行的操作并没有关系

* 它通过引入一个回调,避免更多的回调

* 当promise的状态发生改变,就会触发.then()里的响应函数处理后续步骤

* promise的状态一经改变是不会再改变的

* promise实例一经创建,执行器就会立即执行,每一个then都会返回一个新的promise实例

* promise的三个状态

* pending   等待,初始状态

* fulfilled     实现,操作成功

* rejected    被否决,操作失败

* 简单范例


* 两步执行的范例:分两次顺序执行

* 1.假如对一个Promise已经完成了,再.then()会怎样?

操作是一个队列的状态,可以在后面追叙任意多个then,不管其前面的promise的状态是否完成,队列都会按照固定的顺序去执行(如果没有完成,就按顺序执行;如果没有完成,then也会得到前面promise的值)

* 2.then里不返回Promise===》假如.then()函数里边不返回新的promise,会怎样?

* 如果你不返回promise实例,那么它默认会去执行下一个环节

* 3..then()

* .then()接收两个函数作为参数,分别代表fulfilled和rejected

* .then()可以返回一个新的Promise实例,所以可以链式调用

* 当前面的promise状态改变时,.then()根据其最终的状态,选择特定的状态进行响应函数执行

* 状态响应函数可以返回新的promise,或其他值

* 如果返回新的promise,那么下一级.then()会在新的promise状态改变之后执行

* 如果返回其他任何值,则会立刻执行下一级 .then()

* 4..then()的嵌套

* 因为.then()返回的是promise实例,外边的会等待里面的then()执行完再执行外边的then()

* 可以将嵌套的then变成链式的then,方便理解

* 5.错误处理

* promise会自动捕获内部异常,并交给rejected响应函数处理,不过,捕获的是异步完成回调之后的错误信息,没有办法确定到底是那一步出错

* 两种做法:

* reject('错误信息').then(null,message => {})

* throw new Error('错误信息').catch(maessage => {}) //可以捕获前面每一步的错误,推荐使用

* 6.错误和then连用

* .catch()也会返回一个promise实例,建议在所有队列的最后都加上.catch()以避免漏掉错误处理造成的问题

* 三.Promise进阶

* 1.常用函数

* promise.all([p1,p2,p3,...]) ---- 用于将多个promise实例包装成一个新的promise实例,返回的是一个新的普通的promise实例;接收一个数组作为参数,数组里可以是promise对象,也可以是其他的值,但只有promise对象会等待状态的改变;当所有的子promise都完成,该promise才完成,返回值是全部值的数组;如果子promise中有任一个失败,该promise就失败,返回值是第一个执行失败的子promise的结果(这个的例子待纠正)

* .map() ,和.all()组合使用

* 实现队列,使用 .forEach() ,问题:没有把.then()产生的新Promise实例赋值给promise,没有生成队列;使用.reduce() 从数组的一端开始直到另一端遍历 ,问题:Promise实例创建之后会立即运行执行器代码,所以这个也无法达成队列效果

* .resolve()   返回一个fulfilled 的promise实例,或原始的promise

* 参数为空,返回一个状态为fulfilled的Promise实例

* 参数是一个和Promise无关的值,同上,不过fulfilled响应函数会得到这个参数

* 参数是thenable,就立即执行它的.then()

* .reject()   返回一个状态为rejected的promise的实例,或原始promise实例

* 参数为空,返回一个状态为rejected的promise实例

* 参数是一个跟promise无关的值,同上,不过rejected响应函数会得到这个参数。

* 参数为promise实例,则返回该实例,不做任何修改

* 与promise.resolve相比,不认thenable

* .race() 类似于all(), 区别在于它有任意一个完成就算完成,常见用法:把异步操作和定时器放在一起;如果定时器先触发,就认为超时,告知用户(超时提醒)

* 2.把回调包装成promise(封装)

* 好处:可读性更好;返回的结果可以加入任何promise队列

*

* 3.把任何异步操作包装成promise

* 假设需求:用户点击按钮,弹出确认弹窗;用户确认和取消有不同的处理。(定制弹窗)

* 4.jQuery中的promise,见jqXHR

* $.ajax(url,{

* dataType:'json'

* }).then(json => {

* //do something

* });

* 如果需要在ie中使用promise,有两个选择:

* 1.只想实现异步队列:jQuery.defered

* 2.需要兼容所有的平台:Bluebird,Promise polyfill

* fetch api: 是XMLHttpRequest的现代化替代方案

* 更强大也更友好;直接返回一个promise实例

* fetch('some.json').then(response => {

* return response.json();

* }).then(json => {

* //do something with json

* }).catch(err => {

* console.log(err);

* });

* promise的支持情况

*

* 5.异步函数---async/await: 赋予JS以顺序手法编写异步脚本的能力; 即保留异步运算的无阻塞特性,还继续使用同步的写法;还能正常使用return/try/catch

那么,为什么还要学Promise呢?

* async是在promise上计算的,会等待返回一个promise对象;async声明一个异步函数,await等待一个promise对象返回,例如:

* async function f1(){

* var x = await resolveAfter2Seconds(10);

* console.log(x);

* }

* f1(); //f1()是一个异步函数,后面可以用then继续下面的操作

*

* */


学习与面试题总结分析:

Promise - JavaScript | MDN

ES6 Promise用法小结 - 涂涂 - CSDN博客

对于promise的常见面试题总结分析 - 简书

关于 ES6 中 Promise 的面试题_慕课手记

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,698评论 1 56
  • 目录:Promise 的含义基本用法Promise.prototype.then()Promise.prototy...
    BluesCurry阅读 1,488评论 0 8
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,695评论 0 5
  • 一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...
    Alex灌汤猫阅读 818评论 0 2
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 3,348评论 0 19