ES6 --promise了解

1)Promise 作用

         A)主要用于异步计算  

         B)可以将异步操作序列号

         C)对象之间传递和操作Promise,帮助处理队列

2)为什么诞生了Promise?      Javascript中包含大量的异步操作

3)异步操作的常见语法

        A)事件侦听与响应

        B)回调($.ajax,$(function(){})),异步影响不太大

但是由于node.js诞生,并且‘无阻塞高并发’特性,使用异步操作依赖加强。

4)异步回调导致问题

       A)回调地狱(不好维护)

       B) 无法正常使用return和throw

      C)无法查看堆栈信息(每一回调都会重新开启一个)

       D)多个对调之间难以建立联系

 

5)Promise设计

new Promise(

       /*执行器*/

        function(resolve,reject){

            //一段耗时很长的异步操作

             resolve(); //数据处理完成

             reject();  //数据处理出错

        }

).then(function A(){

 //成功,下一步

},function B(){

// 失败,做相应处理

});

A) Promise是一个代理对象,他和原先要进行的操作并无关系;

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

6)Promise有3个状态

        A)pending 待定,初始状态

        B)fulfilled 实现,操作成功

        C) rejected 被否决,操作失败

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

Promise 状态一经改变,不会在变。

图解:

        

  

7)promise案例(定时执行)

           console.log('here we go');

           new Promise( resolve => {

                  setTimeout(()=>{

                       resolve('hello');

                    }

                  ,2000);

            }).then(value=>{

                 console.log(value+'world');

            }); 

8).then()

   A)状态响应函数可以返回新的Promise,或其他值

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

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

注意: 如果.then()里面有.then()的情况

解决:  a) 因为.then()返回的还是Promise实例   b)会等里面的.then()执行完,在执行外面的。  c)对于我们来说,此时最好将其展开,会更好读。

 

练习 1)

                           

 2)

                           

3)

                            

4)                      

                           

 

9) 错误处理

a)Promise 会自动捕获内部异常,并交给rejected 响应函数处理

b)throw new Error('错误信息').catch(message => {} )------推荐使用这种,catch可以捕获之前所有的错误;

10).catch()+ .then()如何处理?

catch() 也相当于promise 回调,如何没有错误,则fulfilled状态执行then。如果抛出错误,则rejected状态不执行then;

建议:在所有队列的最后加上.catch(),以避免漏掉错误处理造成意想不到的问题;

 

10) Promise 常用的函数

  A) Promise.all() 批量执行 和 .map()连用;

        *  Promise.all([p1,p2,p3....])用于将多个Promise实例,包装成一个新的Promise实例;

        *  返回的实例就是普通的Promise;

        *   他接受一个数组作为参数

       *    数组里可以是Promise对象,也可以是别的值,只有Promise会等待状态改变;

       *    当所有的子Promise都完成,该Promise 完成,返回值是全部值的数组;

       *    有任何一个失败,该Promise失败,返回值是第一个失败的子Promise的结果;

B) 实现队列

     第一种: .forEach()

     

  第二种  .reduce()

 

C) Promise.resolve()

 返回一个fulfilled的Promise实例,或原始Promise实例;

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

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

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

        *   参数为thenable,立刻执行.then()

D) Promise.race()

 类似Promise.all(),区别在于他有任意一个完成就算完成;

 常见用法:

        * 把异步操作和定时器放在一起

        * 如果定时器先触发,就认为超时,告知用户;

11) Promise 业务中使用

        A) 把回调包装成Promise最为常见,他有两个显而易见的好处:

             *  可读性更好

             *  返回的结果可加入任何Promise队列

        B) 把任何异步操作包装成Promise

 

12) 如果在IE中使用promise?

两个选择: A) 只想实现异步队列  jQuery.defered

                   B) 需要兼容所有平台: BlueBird ,Promise polyfill

13) 异步函数  async/ await 

    ES2017新增运算符,新的语言元素

          *  赋予 JavaScript 以顺序手法编写异步脚本的能力

         *   既保留异步运算的无阻塞特性,还继续使用同步写法,

         *   还能正常使用 return /  try  /  catch

 

posted @ 2018-09-10 19:25  倩妞驾到  阅读(141)  评论(0编辑  收藏  举报