zoukankan      html  css  js  c++  java
  • Promise简介以及常用方法

    一、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)  //不会执行
      })
  • 相关阅读:
    MyBatis 框架系列之基础初识
    从零开始实现在线直播
    面试中关于Redis的问题看这篇就够了
    Spring Boot 中使用 MyBatis 整合 Druid 多数据源
    MyBatis的foreach语句详解
    小结:“服务器端跳转”和“客户端跳转”的区别
    Centos7.3安装vsftp服务
    Spring 注解@Value详解
    Spring中@Bean与@Configuration
    数据结构之LinkList
  • 原文地址:https://www.cnblogs.com/minorf/p/13038286.html
Copyright © 2011-2022 走看看