es6知识点及运用整理

promise

一、介绍

Promise，译为承诺，是异步编程的一种解决方案。

二、用法

Promise对象是由Promise构造函数，生成的Promise实例

const promise = new Promise(function(resolve, reject) {
            if (/*异步操作成功*/){
              resolve(val)
            } else {
              reject(error)
            }
          })

• Promise有三种状态：（大方向就是：改变状态，获取状态的结果）

•   pending：初始状态。

    fulfilled：操作成功状态，调用resolve()来改变状态，通过.then来拿到状态的结果

    rejected：操作失败的状态，调用reject()来改变状态，拿到状态的结果有两种方式：

    ① 通过.then函数接收两个函数参数：第一个函数参数用于接受resolve的结果，第二个函数参数用于接受reject的结果

    ② 通过.catch（）方法，来传入一个函数参数，来拿到状态的结果

• Promise的状态一旦发生改变，就不能再修改成其他状态了。

// fulfilled状态
      // 通过.then()的第一个函数参数来获取结果
     const promise1 = new Promise(function (resolve, reject) {
        resolve('222')
      }).then(function(val) {
        console.log(val);
      })
// rejected状态
      // ① 通过.then()的第二个函数参数来获取结果
      const promise2 = new Promise(function(resolve, reject) {
        reject('333error')
      }).then(()=>{}, (err) => {
        console.log(err);
      })
      // ② 通过.catch()来获取结果
      const promise3 = new Promise(function(resolve, reject) {
        reject('err code')
      }).catch((err) => {
        console.log(err);
      })

 Promise的相关方法：

Promise实例方法：

除了then()、catch()

还有finally()

只要Promse的状态发生了改变，finally函数就会被调用。

new Promise((resolve,reject) => {
        resolve('biubiu')
      }).then(val => {
        console.log(val);
      }).finally(() => {
        console.log('Promise函数状态发生了变更');
      })   

Promise构造函数方法：

• resolve()
• reject()
• all()
• race()
• try()
• allSettled()

resolve()

Promise.resolve()方法会返回一个新的Promise对象，状态为resolved。

const p = Promise.resolve('foo')
// 等价于
const p = new Promise(resolve => resolve('foo'))

reject()

Promise.reject(reason)方法返回一个新的Promise对象，该实例的状态为rejected。

    const p = Promise.reject('出错了')
    p.catch((err) => {
      console.log(err);
    })

    // 等同于

    const p = new Promise((resolve, reject) => {
      reject('出错了')
    }).then(() => {}, (err) => {
      console.log(err);
    })

all()

Promise.all()方法接受一个可迭代对象（Array，Map，Set都属于ES6的iterable类型 ） ，该对象通常是一个数组。

const p = Promise.all(iterable);

返回值： 

• 返回一个新的Promise实例
• 当数组中所有的promise的状态都达到resolved的时候，all方法的状态就会变成resolved
• 如果有一个状态变成了rejected，那么all方法的状态就会变成rejected。

示例：

1. 使用Promise.all()组合多个Promise实例：

      const promise1 = Promise.resolve(3);
      const promise2 = 42;
      const promise3 = new Promise((resolve, reject) => {
        setTimeout(() => { 
          resolve('hello')
        }, 1000);
      });
      const promise4 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('world')
        }, 2000);
      });

      Promise.all([promise1, promise2, promise3, promise4]).then((values) => {
        console.log(values);
      });

运行结果：

2. 处理其中一个Promise实例被拒绝的情况：

const promise1 = Promise.resolve(3);
      const promise2 = 42;
      const promise3 = new Promise((resolve, reject) => {
        setTimeout(() => { 
          resolve('hello')
        }, 1000);
      });
      const promise4 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('world')
        }, 2000);
      });

      Promise.all([promise1, promise2, promise3, promise4]).then((values) => {
        console.log(values);
      }).catch(val => {
        console.log(val);
      }); 

  //运行结果：world

注意事项：

• 如果传入的可迭代对象中包含任何非Promise值，则这些值将被视为 成功解析的Promise。
• 如果传入的可迭代对象为空，则返回的Promise将立即解析为一个空数组。

运用场景：

Promise.all()方法非常有用，可以在需要等待 多个异步操作全部完成后 执行后续操作 的情况下使用。

race()

race方法和all一样每项都，接受的参数是一个是promise的数组。

但是与all不同的是，当最先执行完的事件执行完之后，就直接返回该promise对象的值。

如果第一个promise对象状态变成resolved，那自身的状态变成了resolved；

反之第一个promise变成rejected，那自身状态就会变成rejected。

let promise1 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       reject(1);
	},2000)
});
let promise2 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(2);
	},1000)
});
let promise3 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(3);
	},3000)
});
Promise.race([promise1,promise2,promise3]).then(res=>{
	console.log(res);
	//结果：2
},rej=>{
    console.log(rej)}
)