ES6中的Promise

回调函数分类

1.同步回调

            理解:立即执行,完全执行完了才结束,不会放入回调队列中

            例子:数组遍历相关的回调函数 / Promise的excutor函数

2.异步回调

            理解:不会立即执行,会放入回调队列中将来执行

            例子:定时器回调 / ajax回调 / Promise的成功|失败的回调

//1.同步回调函数

        const arr = [1,3,5];

        arr.forEach(item =>{//遍历回调

            console.log(item);

        })

        console.log("forEach()之后")

        上面代码运行结果如下

        

        //2.异步回调

        setTimeout(()=>{//异步回调函数,会放入队列中将来执行

            console.log("timeout callback()");

        },0)

        console.log("setTimeout()之后");

上面代码运行结果如下

 

 Promise的基本使用

看下面的代码

        //1.创建一个Promise对象
        const p = new Promise((resolve, reject) => {//执行器函数
            //执行异步操作任务
            setTimeout(() => {
                const time = Date.now();
                if(time % 2 == 0){
                    //成功调用resolve(value)
                    resolve("成功的数据,time"+time);
                }else{
                    //失败调用reject(reason)
                    reject("失败的数据 time"+time);
                }   
            }, 1000);
        })
        p.then(value=>{
            //接收成功的数据
            console.log(value);
        },reason=>{
            //接受失败的数据
            console.log(reason);
        })

 Promise的API

Promise构造函数 Promise(excutor){}

1.excutor函数        执行器函数

2.resolve函数        内部定义成功时我们调用的函数  用value异步回调函数接收

3.reject函数           内部定义失败时我们调用的函数  用reason异步回调函数接收

4.Promise.all([p1,p2,p3])        里面用数组储存了多个Promise的值,只有当里面所有的promise值都成功才会成功

5.Promise.race([p1,p2,p3])        里面用数组存储了多个Promise的值,他的返回值是数组中最先完成的promise状态

6.Promise.prototype.then(onResolved,onRejected){}

        onResolved函数:成功的回调        (value)=>{}

       onRejected函数:失败的回调        (reason)=>{}

7.Promise.prototype.catch        (onRejected)=>{}

         onRejected函数:失败的回调     (reason)=>{}

Promise中几个问题

    <script>
    /*
    1.如何改变Promise的状态
    (1)resolve(value):如果当前时pendding就会变成resolved
    (2)reject(reason):如果当前是pendding就会变成rejected
    (3)抛出异常:如果当前pendding就会变成rejected
    
    2.一个Promise执行多个成功/失败回调函数,都会调用
      当promise改变对应状态都会调用
    */
    const p = new Promise((reslove,reject) => {
        //reslove(1)//  promise变成resolved状态
        //reject(2)//   promise变成rejected状态

        throw new Error('出错了')//抛出异常,promise变成rejected失败状态,reason为抛出的error 
    })
    // console.log(p);
    p.then(
      value => {},
      reason => {console.log(reason);}
    )
  </script>

代码运行结果

 

<script>
    /*
      3.改变promise状态和 指定回调函数谁先谁后
        (1)都有可能,正常情况下事先指定回调在改变状态,但也可能先改状态后指定回调
        (2)如何先改状态再指定回调？
            ①在执行器中直接调用resolve()/reject()
            ②延时更长时间在调用then()
        (3)什么时候才能得到数据
            ①如果先指定的回调,那当状态发生改变时,回调函数就会调用,得到数据
            ②如果先改变状态,那当指定回调时,回调函数就会调用,得到数据
    */
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1)//后改变状态(同时指定数据),异步执行回调函数
      }, 1000);
    }).then(//先指定回调函数,保存当前指定的回调函数
      value => { },
      reason => { console.log("reason" + reason); }
    )
    new Promise((resolve, reject) => {
      resolve(2)//先改变状态(同时指定数据)
    }).then(//后指定回调函数,,异步执行回调函数
      value => {console.log("value2" + value); },
      reason => { console.log("reason2" + reason); }
    )
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(3)//先改变状态(同时指定数据)
      }, 1000);
    })
    setTimeout(() => {
      p.then(//后指定回调函数,,异步执行回调函数
        value => { console.log("value3" + value);},
        reason => { console.log("reason3" + reason); }
      )
    }, 1100);


  </script>

运行结果如下

 

<script>
    /*
      4.promise.then()返回的新promise的结果状态由什么决定

        (1)简单表达:由then()指定的回调函数执行结果决定
        (2)详细表达
            ①如果抛出异常,新promsie变成rejcted,reason为抛出异常
            ②如果返回的是非promise的任意值,新promise变为resolved,value为返回的值
            ③如果返回的是另一个新的promise,此promise的结果会成为新promise的结果
    
    */

    new Promise((resolve, reject) => {
      resolve(1)
    }).then(
      value => {
        console.log('onResolved1', value);
        // return 3
        return Promise.resolve("haha")
        // return Promise.reject("出错了")
      },
      reason => {
        console.log('onRejected1', reason);
      }
    ).then(
      value => {
        console.log('onResolved2', value);
        return Promise.reject('error')
      },
      reason => {
        console.log('onRejected2', reason);
      }
    ).then(
      value => {
        console.log('onResolved3', value);
      },
      reason => {
        console.log('onRejected3', reason);
      }
    )
  </script>

代码运行结果如下