Promise详解

1.基本概念：

Promise是JS异步编程中的重要概念， 异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一

2.Promise的三种状态：

pending：对象初始化状态
fulfilled：当调用resolve(成功)，会由pending => fulfilled
rejected：当调用reject(失败)，会由pending => rejected

3.创建Promise

3.1 new Promise(resolve, reject）；

const promise = new Promise((resolve, reject) => {
   resolve('fulfilled'); // 状态由 pending => fulfilled
    //reject('rejected'); // 状态由 pending => rejected
});

//then 在Promise 状态发生改变时触发
promise.then(result => { // onFulfilled  resolve被调用会进入
    console.log(result); }, 
    reason => { // onRejected ，reject被调用会进入
})

3.2 Promise的静态方法创建

3.2.1 Promise.resolve() 返回一个fulfilled状态的promise对象

3.2.2 Promise.reject() 返回一个rejected状态的promise对象

Promise.reject() 不管传给它什么值,它会直接把这个值传递给错误回调函数。

Promise.resolve() 如何执行取决于传递的参数。

1）传普通类型(数值等)

           let p1 = new Promise(resolve => {
                resolve('成功');
            })
            //和上面是等价的
            let p2 = Promise.resolve('成功');  //会直接决议为成功并把这个值传递过去
            

2）Promise类型：

let param = new Promise( resolve =>{
                resolve('----resolve----')
            })
            //直接返回传递进去的promise
            let p = Promise.resolve(param);  //直接将param实例返回给了p
            p.then(data => {console.log(data)})  //后打印结果为----resolve----
            console.log( p === param)  //打印true，虽然在p.then的下方但是由于Promise异步执行会先打印打印true
            

3） 传递一个thenable对象

let  obj = {  //obj是一个thenable对象
                then(callback){
                    console.log('-----then---------');
                    callback('-------callback-----')  
                },
                other(){
                    console.log('--------other---------')  //不打印
                }
               
            }

Promise.resolve(obj)

执行结果：

Promise.resolve(obj).then(data => {
                console.log(data)
            })

执行结果：

结论:传进含有then方法的对象时,会立即执行then方法,如果then方法中有回调的时候也会执行(callback(‘-------callback-----’) 会被当成参数去替换 then(data => {
console.log(data)
}) 中的data， 在调用then()时被执行)

resolve(data)的参数会被当做then(data)的参数执行。

如果理解有偏差，请大家多多指正。

4.异步在ES6的应用

ES6 中新加入了 async，await 两个语法糖支持异步

**async：**注明这个方法是异步方法，方法返回值会被包装成promise对象。
**await：**只能在async标注的方法里面使用，用于同步等待异步方法返回，如果抛出异常需要用try catch接收

1）await 接收抛出异常的异步方法

 async test() {
      throw new Error('出现异常')
    },
   async test2(){
      try {
        let a = await this.test()
        console.log('data:' + JSON.stringify(a))
      } catch (e) {
        console.error('异常被捕获')
      }
   } 

运行 test2() 测试结果：

2）await 接收正常返回的异步方法

  async test() {
      return {
        id: 1,
        age: 2
      }
    },

结果：

3）不使用await接收抛出异常的async 方法

async test2() {
      const a = this.test()
      console.log('-----------执行前 a:-------------', JSON.stringify(a))
      a.then(data => {
       console.log('data:' + JSON.stringify(data))
      }).catch(e => {
        console.error(' test2:', e)
      })

}，

async test() {
     throw new Error('异常')
      return {
        id: 1,
        age: 2
      }
    },

结果：
异步返回值为promise对象且状态为 rejected，然后被catch方法捕获

4）不使用await接收正常返回的async 方法

  async test() {
      return {
        id: 1,
        age: 2
      }
    },

结果：

返回了promise 对象状态为fulfilled 触发then方法。

5. await 只会阻塞async 修饰的方法里面的执行，并不会阻塞主线程，test() 和test2() 方法里面是阻塞的，test3() 方法没有被阻塞。

async function test() {
    console.log(  await wait(200))
    console.log('111111')
}

async function test2() {
console.log(  await wait(1000))
console.log('222222222')
}

function wait(ms) {
  return new Promise(resolve => { setTimeout(() => resolve(123 + ms), ms)
})
}

   function test3(){
        test2()
        test()
        console.log("123")
      }

      test3()
VM805:19 123
undefined
VM805:2 323
VM805:3 111111
VM805:7 1123
VM805:8 222222222