js中Promise的基本概念和方法

一：概念：

1、创建promise: new Promise (executor);   executor是同步执行的函数

new Promise(function (resolve, reject) { 
  console.log('I promise')

})
console.log('after')
//  log: I promise       after   

二：特点：

1、Promise的状态：1)->pedding(进行中)， fufilled （ resolve（已成功），reject（已失效））；对象的状态不受外界的影响；

2、状态是不可逆的；promise固化以后，在对promise对象添加回调，是可以直接拿到这个结果的；如果说是事件的化，一旦错过了，就真的错过了

3、promise本身是异步操作

4、resolve（），reject（）异步函数；p.then(cb) - cb异步回调函数

let p = new Promise (function (resolve, reject) {
      resolve(1)
      console.log(0);
    })
    // console.log('after')
    p.then(val => {
      console.log(val);
    });
    console.log(2)      // 0  2  1

5、链式调用：返回的成功和失败的promise可有.then再一次调用 

let p = new Promise(function (resolve, reject) {
      resolve(1)
    })
    // console.log('after')
    p.then(val => {
      return new Promise((resolve, reject) => {  // 返回成功的结果
        resolve('y-promise')
      })
    }, err => {
      return 3
    }).then(
      (val) => {
        console.log(val);  // y-promise
      },
      (reason) => {
        console.log(reason);
      })

6、固化之后捕获不到错误 

let promise = new Promise(
 function (resolve, reject) {
   resolve('a')
 }
)
promise.then().then().then(val => {  // 未传参数被忽略
  console.log(val)  // a
}, err => {})

 8、状态依赖

let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(new Error('fail'))
      }, 2000)
    })
    let p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(p1)  // p2 中的p1状态结果出现错误会被捕获
      }, 1000)
    })
    p2.then((val) => {
      console.log(val);
    }).catch((err) => {
      console.log(err); // Error: fail
    })

 

三：promise解决的问题

1、回调地狱：另一个函数的执行的需要依赖上一次回调的结果，会产生回调地狱（文件读取）

2、try {}catch(e){} 能捕获同步的异常，异步产生的异常不能捕获；

3、以前写法，不好维护，不便扩展

4、同步并发异步代码的问题

四：方法：

1、Promise.all([p1, p2, p3, p4]) ->iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入只返回一个Promise实例 ;

成功的结果：结果是resolve数据组成的一个数组；

等待所有参数中的resolve结束才返回一个promise；

出现错误返回第一个出现reject的错误的类型；

 

var p1 = new Promise((resolve, reject) => {
      setTimeout(resolve, 100, 'one');
    });
    var p2 = new Promise((resolve, reject) => {
      setTimeout(resolve, 200, 'two');
    });
    var p3 = new Promise((resolve, reject) => {
      setTimeout(reject, 300, 'three');
    });
    var p4 = new Promise((resolve, reject) => {
      setTimeout(resolve, 400, 'four');
    });
    var p5 = new Promise((resolve, reject) => {
      // reject('reject');
      // resolve('2')
      resolve('fail')
    });

    Promise.all([p1, p2, p3, p4, p5]).then(values => {
      console.log(values);
    }, reason => {
      console.log(reason)  // 'three'
    });

2、Promise.race([ iterator ]) // 参数中的哪一个promise执行的快就返回哪一个执行的promise结果和状态 

var p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('one')
      }, 200)
    })
    var p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('two')
      }, 300)
    })
    var p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('three')
      }, 4000)
    })
    var p4 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('four')
      }, 500)
    })
    var p5 = new Promise((resolve, reject) => {
      reject('p5')
    })
    const res = Promise.race([p1, p2, p5, p3, p4])
    console.log(res);  // promise reject[[Prototype]]: Promise
// [[PromiseState]]: "rejected"
// [[PromiseResult]]: "p5

3、Promise.resolve(); 返回resolve（解决）的promise对象

Promise.reject(); 返回reject（拒绝）的promise对象；

4、Promise.prototype.then( (val) => { }, (err) => { } ) 第一个参数表示解决的值；第二个参数表示拒绝值

Promise.prototype.catch(err => { }) 捕获拒绝的值；

Promise.prototype.finally( cb ) 方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数

五：异步任务优先级（宏和微）

1、微任务优先级更高

 

// 先执行微任务
    Promise.resolve().then(() => {
      console.log('promise1');
      setTimeout(() => {  // 遇到异步丢到异步队列中
        console.log('setTimeout2');
      })
    })
    // 在执行宏任务
    setTimeout( () => {
      console.log('setTimeout1');
      Promise.resolve().then(() => {   // 丢到异步队列中微任务先执行
        console.log('promise2');
      })
    })
// promise1  setTimeout1   promise2   setTimeout2