promise的用法

首先理解一下异步和同步：

异步：

js是单线程的，只有一个主要的任务流程处理我们的js程序

把一些耗时的事情通过新开线程的方式来实现，就是采用异步方法。

异步任务有：setTimeout、setInterval、ajax，像ajax的事情还没有处理完成，也不会影响当前页面的其他行为。

同步：当前线程直接处理

异步任务一般采用回调的方式，

常常遇到问题：callback hell：回到地狱。解决办法：promise

promise：构造函数，通过promise来构建一个异步处理对象。

// var a = 1;
        let p1 = new Promise ((resolve,reject)=>{
          // 要执行的异步任务
          /*
           resolve:函数，当我们调用该函数的时候。可以把当前Promise对象的任务状态改成resolved
           reject：函数，当我们调用该函数的时候，可以把当前的Promise对象的任务状态改成rejected
           只要Promise的任务状态发生了变化，这个Promise对象的then方法就会被执行
          */
          setTimeout(() =>{
              a=10;
              // setTimeout执行完之后就更改promise的状态
              // resolve();//resolved
              reject();//rejected
          },2000);
       });
        p1.then(()=>{
            //then方法就是Promise处理任务以后继续执行的任务,
            //then方法第一个参数是用来处理成功的，第二个参数是用来处理失败的
            console.log(a)
        },()=>{
            console.log('失败了')
        })

Promise对象
    基本使用
    new Promise(function(resolve, reject) {
        // ... 要执行的（异步）任务
    })

Promise状态：[[PromiseStatus]]
    - pending：初始状态，既不是成功，也不是失败状态
    - fulfilled/resolved：意味着操作成功完成
    - rejected：意味着操作失败

Promise状态：[[PromiseStatus]]
    - resolve()函数：更改Promise对象为成功状态
    - reject()函数：更改Promise对象为失败状态

then方法
    任务后续处理函数，一般情况下处理某个Promise任务完成（无论是成功还是失败）的后续任务
    .then(onFulfilled/onResolved, onRejected)
        onFulfilled/onResolved：fulfilled/resolved状态下调用
        onRejected：rejected状态下调用

Promise值：[[PromiseValue]]
    任务处理完成（成功或失败），返回的值
        通过 resolve()、reject() 函数传入
            resolve(1)、reject(1)
        onFulfilled/onResolved, onRejected 函数接收
            .then(val=>console.log(val), ...)
注意：

   new Promise(()=>{
             setTimeout(()=>{
                 var a = 10;
                 resolve();
             },2000);
        }).then(()=>{
            // 这样会报错，undefined，因为这里的a和setTimeout的a分别是两个函数里的a，不是同一个变量
            console.log(a)
        });

//问题，如何将异步任务中产生的数据扔给then（）函数执行呢：
        // 解决方法：resolve,reject这两个函数是可以传入参数的，传入的参数将被传递给then中的函数使用
        new Promise((resolve,reject)=>{
             setTimeout(()=>{
                 var a = 10;
                 resolve(a);
             },2000);
        }).then(v=>{
            // 这样会报错，undefined，因为这里的a和setTimeout的a分别是两个函数里的a，不是同一个变量
            console.log(v)
        });

Promise Chain

then函数执行后会返回一个新的Promise对象
        - 如果then没有传入处理函数，那么会返回一个继承了上一个处理状态的 Promise 对象

 new Promise((resolve,reject) =>{
            reject();
        }).then().then(()=>{
            console.log(0)
        },() =>{
            console.log(1)
        })
// 结果是打印出1

 如果then传入处理函数，那么默认返回一个 fulfilled/resolved 状态的 Promise 对象

new Promise((resolve,reject) =>{
               reject();
           }).then(()=>{
               console.log(1)
           },()=>{
               console.log(2)
           }).then(()=>{
               console.log(3)
           },() =>{
               console.log(4)
           })
结果：2 3

如果then传入了处理函数，通过处理函数显示的return了一个新的 Promise，那么返回这个显示的 Promise 对象

 new Promise((resolve,reject) =>{
           reject();
       }).then(()=>{
           console.log(1);
       },()=>{
           console.log(2);
           return new Promise((resolve,reject)=>{
               reject();
           })
       }).then(()=>{
           console.log(3)
       },() =>{
           console.log(4)
       })
结果：2 4

new Promise((resolve,reject) =>{
       resolve();
   })
   .then(() => {
       console.log('登录成功')
       //获取权限
       return new Promise((resolve,reject) =>{
         //如果是管理员，则成功，调用resolve（）
           // resolve();
           if(false){
               resolve();//无法解决中途终止后续执行的问题
           } else{
               reject();
           }
       })
   },() => {
       console.log('登录失败')
   })
   .then(() => {
       console.log('是管理员')
       //获取资源
       return new Promise((resolve,reject) =>{
           resolve();
       })
   },() => {
       console.log('不是管理员')
   
   })
   .then(() => {
       console.log('拿到资源')
   },() => {
       console.log('不能获取资源')
   })

问题：
        不易中途终止后续任务执行

new Promise((resolve,reject) =>{
       // resolve();
       reject('第一步错误')
   })
   .then(() => {
       console.log('登录成功')
       //获取权限
       return new Promise((resolve,reject) =>{
         //如果是管理员，则成功，调用resolve（）
           // resolve();
           if(false){
               resolve();//无法解决中途终止后续执行的问题
           } else{
               reject();
           }
       })
   })
   .then(() => {
       console.log('是管理员')
       //获取资源
       return new Promise((resolve,reject) =>{
           resolve();
       })
   })
   .then(() => {
       console.log('拿到资源')
   }).catch(err => {//catch执行完毕之后也会返回一个成功的状态的promise，所以他会继续执行catch后面then的第一个参数
       console.log(err)
   });

.catch方法
    处理 rejected 的情况，与 then 的第二个参数 onRejected 相同
    返回一个 Promise 对象，状态默认为 fulfilled/resolved
    可以捕获 catch 之前的 Promise Chain 中的任一错误（如果 Promise Chain 中的 then 没有处理的话）

all属性：

多任务处理
        Promise.all(iterable)
        iterable：包含多个 Promise 的迭代器对象，比如数组
    当迭代器对象中的所有 Promise 状态都会 fulfilled/resolved 的时候，整体才是 fulfilled/resolved，否则就是 rejected

 let p1 = new Promise((resolve,reject)=>{
     setTimeout(()=>{
         console.log(1)
         resolve(10);
     },2000);
 })

 let p2 = new Promise((resolve,reject)=>{
     setTimeout(()=>{
         console.log(2)
         resolve(20);
     },3000);
 })
// all属性表示，等p1,p2任务完成之后再执行then函数，
//arr表示的是p1，p2值得集合
Promise.all([p1,p2]).then(arr => {
    console.log(3,arr);//10,20
})

//race属性:只要p1p2中一个执行完了就会马上执行then方法
Promise.race([p1,p2]).then(arr => {
    console.log(3,arr);//10
})

返回一个指定状态得promise对象

Promise.resolve(1).then((v)=>{
    console.log(1)
},()=> {
    console.log(2)
})
//结果为：1

异步函数：

//await必须在异步函数中才能执行 
          async function fn() {//表示异步函数
               var v = await getValue(10);//await表示等当前得代码执行完毕才执行下面得代码
               console.log(v);

        //可以通过return来终止继续执行后面得代码
               var v = await getValue(10);//await表示等当前得代码执行完毕才执行下面得代码
               console.log(v);
               try{//js中可以将可能会出错的代码放到try语句中，然后用catch捕获异常的错误
                    var v = await getValue(200);//await表示等当前得代码执行完毕才执行下面得代码
                  console.log(v);
               }.catch(e){
                   console.log(e)
               }
          }
          function getValue(val){
              return new Promise ((resolve,reject) =>{
                  setTimeout(()=>{
                      /*var a = 10;
                      resolve(val*10);*/

                      if(val < 100){
                          resolve(val*10);
                      } else{
                          reject('传入的值太大了')//浏览器会报错，可以用try解决
                      }

                  },2000)
              });
          }
          fn();

ES7 - async
    - await 操作符
    - async 函数

    await 必须 在 async 函数中才能使用
    await 后面可以是任意值，但是一般跟 Promise 对象
        - Promise 的 resolve 方法的值就是 await 值
        - Promise 的 reject 不会作为值返回，需要使用 try...catch 进行捕获

promise的缺点：首先，无法取消Promise一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。如果某些事件不断地反复发生，一般来说，使用Stream模式比promise更好。