• JavaScript Promise


    Promise

    1. 定义

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

    注意:Promise构造函数的参数是一个函数,并且该函数的二个参数也是函数。

    promise.then(
        function(value) {//resolved状态的回调函数
        // success
        }
        , function(error) {//rejected状态的回调函数
        // failure
        }
    );
    

    注意:Promise的实例用.then指定resolved和rejected状态的回调函数。其中,第二rejected回调函数可以为空。
    注意:.then指定的回调函数是异步回调函数,需要注意运行时机(同步代码完成之后)和this指针指向(window)

    2. 缺陷

    • Promise对象一旦建立就会立即执行
    • 无法取消Promise
    • 如果未指定rejected状态的回调函数,内部错误无法抛出到外部
    • Promise函数执行中时,无法得知执行进度

    3. 状态

    Promise对象的状态有3种:

    • Pending
    • Fulfilled
    • Rejected
      只有在函数内部可以更改状态值,外部无法改变。
      状态改变后,无法再次改变,重新添加回调函数将会立即得到相同结果。
    let pms = new Promise(
        function(rlv,rjt){
            rlv(1);
        }
    );
    pms.then(
        function(value){
            console.log(value)
        }
    );//1
    //再次添加
    pms.then(
        function(value2){
            console.log(value2)
        }
    );//1
    

    Promise可以嵌套Promise,如下:

    const p1 = new Promise(function (resolve, reject) {
      // ...
    });
    
    const p2 = new Promise(function (resolve, reject) {
      // ...
      resolve(p1);
    })
    

    4. Promise.then的链式调用

    Promise.then方法返回的是一个新的Promise实例,因此可以像下面这样调用

    getJSON("/posts.json").then(function(json) {
      return json.post;
    }).then(function(post) {
      // ...
    });
    

    5. Promise.catch和finally

    • catch总是捕捉距离最近的promise返回
      因此要处理前一个Promise的错误应把catch放在then之前。
      因为then返回的也是一个promise,如果then内部出现错误,则catch捕捉到的就是then的错误。
    • finally(ES2018)不管promise最终是什么状态,都会执行

    6. Promise.all 和 Promise.race

    all:所有都变成fulfilled,则返回fulfilled。任意一个编程rejected,则返回rejected
    race:任意一个率先编程fulfilled或rejected,则返回fulfilled或rejected

    const pa = Promise.all([p1, p2, p3]);
    const pr = Promise.race([p1, p2, p3]);
    

    参考:http://es6.ruanyifeng.com/#docs/promise

  • 相关阅读:
    nuxt引入fontawesome
    springboot+springsecurity+vue实现简单的登陆认证
    vue给v-html渲染出的页面添加样式
    vue整合SimpleMDE做编辑器
    vue整合tinymce做富文本编辑器
    vue引入svg图标
    vue刷新整个页面
    解决Vue2.9.6无法卸载的问题
    使用npm命令下载sass时出现Error: not found: python2
    html中好玩的技巧,你知道几个
  • 原文地址:https://www.cnblogs.com/full-stack-engineer/p/9769889.html
Copyright © 2020-2023  润新知