Promise简介以及常用方法

Posted 2020-12-07 minorf

一、Promise简介

　　1、Promise是什么？

　　　　Promise是一个对象，代表一个异步操作的最终完成或者失败。

       2、Promise的状态

　　　　pendding：初始状态，既不是成功，也不是失败状态

　　　　fulfiled：操作成功

　　　　rejected：操作失败

　　　　pendding状态的Promise对象，可能会变为fulfiled状态并传递一个值给相应的状态处理方法，也可能变为rejected状态并传递失败信息。

　　3、Promise的特点

　　　　（1）、状态不会受到外界影响，只有异步操作的结果才能决定当前是哪一种状态，其他操作无法改变

　　　　（2）、一旦状态改变，就不会再变，任何时候都可以得到这个结果。

　　4、语法

　　new Promise ( function( resolve, reject ){ ... })

　　resolve：将Promise的状态置为fulfiled

　　reject：将Promise的状态置为rejected

　　5、Promise缺点

　　（1）、一旦创建Promise就会立即执行，中途无法取消

　　（2）、如果不设置回调函数，Promise内部抛出错误不会反应到外部

　　（3）、处于pennding状态时，无法得知目前进展到哪一步

　　6、Promise对象的then方法

　　语法：.( onfulfiled , onrejected)=>{}

　　then方法有两个参数，都是函数类型，分别为onfulfiled以及onrejected，当Promise的状态为fulfiled时，调用then的onfulfiled方法，当Promise的状态为rejected时，调用then的onrejected方法

　　onfulfiled函数：成功的回调函数 （value）=> { }

　　onrejected函数：失败的回调函数    (reason ) => { }

　　7、一个简单的Promise

 new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve(‘成功状态‘);
      reject(‘失败状态‘)
    }, 300);
  }).then((value) => {
    console.log(value);　　//resolve才会输出  成功状态
  }, (reason) => {
    console.log(reason)　　//reject才会输出   失败状态
  });

二、Promise几种常用方法

　　1、Promise.resolve()

　　返回一个给定值解析后的Promise对象。如果参数本身就是一个Promise对象，则直接返回这个Promise对象。

　　栗子：

　　//使用静态Promise.resolve方法 
　　let promise = Promise.resolve(‘resolve方法‘);
　　promise.then((value) => {
  　　console.log(value)　　//输出：   resolve方法
  　　})

　　//resolve另外一个promise
　  let promise1 = Promise.resolve(promise);
　　promise1.then((value) => {
    console.log(‘resolve另外一个promise：‘ + value)　　　　　　//输出：  resolve另外一个promise：resolve方法
   })

　　2、Promise.reject()

　　返回一个带有拒绝原因的Promise对象。

　　栗子：　

 let promise = Promise.reject(‘reject方法‘);
  promise.then((value) => { }, (rejected) => {
    console.log(rejected)　　//输出：   reject方法
 })

　　3、Promise.all()

　　将多个Promise封装成一个新的Promise，成功时返回的是一个结果数组，失败时，返回的是最先rejected状态的值。

　　使用场景：一次发送多个请求并根据请求顺序获取和使用数据

　　栗子：

  let promise1 = Promise.resolve(1);
  let promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(‘promise2‘);
    }, 2000);
  })
  let promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(‘promise3‘);
    }, 1000);
  })
  let promise4 = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(‘promise4‘);
    }, 1000);
  })
  let promise5 = Promise.reject(‘promise5‘);

  Promise.all([promise1, promise2, promise3]).then((values) => {
　　//三个promise都是成功的，所以会输出一个数组
    console.log(values)　　　　// [1, "promise2", "promise3"]
  }) 

  Promise.all([promise1, promise2, promise3, promise4]).then((values) => {
    console.log(values)　　
  }, (reason) => {
　　//promise4是失败的，所以只会返回promise4的失败结果
    console.log(reason)　　　　//promise4
  })

  Promise.all([promise1, promise2, promise3, promise4, promise5]).then((values) => {
    console.log(values)
  }, (reason) => {
　　//promise4个promise5都是失败的，但是promise5比promise4最先失败，所以返回promise5的失败结果
    console.log(reason)　　　　//promise5
  })

　　4、Promise.race()

　　返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

　　简单来说，就是多个Promise中，哪个状态先变为成功或者失败，就返回哪个Promise的值

 let promise1 = new Promise((resolve, reject) => {
　　//setTimeout第三个以后的参数是作为第一个func()的参数传进去,promise1作为resolve的参数
    setTimeout(resolve, 500, ‘promise1‘);
  });

  let promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, ‘promise2‘);
  });

  let promise3 = new Promise((resolve, reject) => {
    setTimeout(reject, 500, ‘promise3‘);
  });

  let promise4 = new Promise((resolve, reject) => {
    setTimeout(reject, 100, ‘promise4‘);
  });

  Promise.race([promise1, promise2]).then((value) => {
    console.log(value);     //promise2 100 <promise1 500  所以输出： promise2
  });  

  Promise.race([promise3, promise4]).then((value) => {
  }, (rejected) => {
    console.log(rejected)   //promise4 100 < promise3 500  所以输出： promise4
  });

  Promise.race([promise2, promise3]).then((value) => {
    console.log(value)      //promise2 100 < promise3 500   所以会走成功状态，输出： promise2
  }, (rejected) => {
    console.log(rejected)
  });

  Promise.race([promise1, promise4]).then((value) => {
    console.log(value)
  }, (rejected) => {
    console.log(rejected)   //promise4 100 < promise1 500   所以会走失败状态，输出： promise4
  });

　　5、Promise.prototype.catch()

　　返回一个Promise，并且处理拒绝的情况。

　　栗子：

 let promise = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, ‘promise‘);
  });
  promise.then((value) => {
    console.log(value);　　　　//promise
    throw ‘抛出一个异常‘     //通过throw 抛出
  }).catch((e) => {
    console.log(e)　　　　//输出： 抛出一个异常
  })

　　注意：

　　在异步函数中抛出的错误不会被catch捕获到

 let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      throw ‘抛出一个异常‘;
    }, 1000)
  });
  promise1.catch((e) => {
    console.log(e)  //不会执行
  })

　　在resolve后面抛出的错误会被忽略

let promise2 = new Promise((resolve, reject) => {
    resolve()
    throw ‘抛出异常‘
  });
  promise2.catch((e) => {
    console.log(e)  //不会执行
  })