深度理解Promise--Promise的特点和方法详解

2019-08-15 admin

什么是promise?

Promise(承诺),在程序中的意思就是承诺我过一段时间(通常是一个异步操作)后会给你一个结果,是异步编程的一种解决方案。从语法上说,原生Promise 是一个对象,从它可以获取异步操作的消息。

promise的特点

promise有三种状态 pending(进行中) fulfilled(已成功) rejected(已失败),只有异步操作的结果,才可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

  • 一旦从等待状态变成为其他状态就永远不能更改状态了。

promise只有两种状态改变: pending(进行中)–> fulfilled(已成功) ; pending(进行中)–> rejected(已失败)。 当状态改变结束时称为resolve(已固定),一旦状态变为 resolved 后,就不能再次改变为Fulfilled

  • 一旦新建Promise就会立即执行,无法中途取消。
  • 如果不设置回调函数callback,Promise内部抛出的错误,就不会反应到外部。
  • 当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

promise实例操作

在这里插入图片描述

首先创造了一个Promise实例

let promise=new Promsie(function(resolve,rejec){
    if(/*异步执行成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})
promise.then(function(){
    //回调执行成功之后的操作
},function(){
    //回调执行失败之后的操作,可选
});

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供。当异步操作成功时(pending--fulfilled),调用resolve(value)函数把操作结果当成参数传出,当异步操作成功时(pending--rejected)调用 reject(error)函数把错误返回。Promise实例生成以后,用then方法分别指定resolved状态和rejected状态的回调函数。

下面看一下构造函数原型的方法

  • Promise.prototype.then()

    • Promise.prototype.then()作用是为 Promise 实例添加状态改变时的回调函数。接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。
    • Promise.prototype.then()返回的是另一个Promise对象,后面还可以接着调用then方法。
  • Promise.prototype.catch()

    • Promise.prototype.catch()则是.then(null, rejection).then(undefined, rejection)的别名,用于指定发生错误时的回调函数。 Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获
    • Promise.catch()方法返回的也是一个 Promise 对象,因此后面还可以接着调用then方法。

上述代码也可以理解成这样:

getJSON('/posts.json').then(function(posts) {
      // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误!', error);
});
  • Promise.prototype.finally()

    • finally方法用于指定不管 Promise 对象最后状态如何,都会执行的回调函数。该方法是 ES2018 引入标准的。

    • finally方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是fulfilled还是rejected。这表明,finally方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。

    • finally本质上是then方法的特例。

      promise.then(()=>{}).catch(()=>{}).finally(() => {
            // 操作
      });
      // 等同于
      promise.then(result => {
              // 操作
          return result;
      }).catch( error => {
              // 操作
          throw error;
      });
      
  • promise的链式调用

    • 由于 .then每次调用返回的都是一个新的Promise实例,如果then中返回的是一个结果的话会把这个结果传递下一次then中的成功回调,所以可以链式调用该实例。

    • 如果then中出现异常,会走下一个then的失败回调,catch 会捕获到没有捕获的异常。

    • 在 then中使用了return,那么 return 的值会被Promise.resolve() 包装,then中也可以不传递参数,如果不传递会透到下一个then中。

      Promise.resolve(1).then(res => {
              console.log(res)
              return 2 //包装成 Promise.resolve(2)
      }).catch(err => 3).then().then(res => console.log(res))
      

promise自身API

将现有的对象转换(包装)成 promise对象。 四种参数类型:

    • 不带参数传递 — 返回一个新的状态为resolve的promise对象。

      let p = Priomse.resolve()   // p就是promise
      
    • 参数是一个 Promise 实例— 返回 当前的promise实例

    • 参数是带then方法的对象

      let data = {
          then:function(resolve,reject){
              resovle('带then方法的对象')
          }
      }
      Promise.resolve(data).thne((res)=> console.log(res)) // '带then方法的对象'
      

      返回一个新的promise,并直接执行then的方法,promise对象的状态就变为resolved,从而立即执行最后那个then方法指定的回调函数,输出 '带then方法的对象'

  • 参数是非空,非then方法的对象,非proimse的

    let p = Promise.resolve('foo')
    // 等价于
    let p = new Promise(resolve => resolve('foo'))
    p.then(res=>console.log(res)) //'foo'
    

    返回一个新的状态为resolve的promise对象,所以then回调函数会立即执行。Promise.resolve方法的参数,会同时传给回调函数。

  • Promise.reject()

    • 参数为非then对象时-----Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

      let p  =  Promise.reject('error')
      // 等价于
      let p = new Primose((resolve,reject)=>reject('出错了')})
      //处理错误的回调
      p.then((null,res)=>console.log(res)) //'出错了'
      
    • 参数是带then方法的对象 —返回的并不是then方法的回调函数,而是data对象本身

      let data = {
          then:function(resolve,reject){
              reject('带then方法的对象出错了')
          }
      }
      Promise.resolve(data).thne((null,res)=> console.log(res)) // data 
      //等同于
      Promise.resolve(data).catch(res=> console.log(res)) // data 
      
  • Promise.all() 该方法将多个promise实例,包装成一个新的promise实例。

        let p = Promise.all([p1,p2,p3])
    

    参数不一定为数组,但必须为一个可迭代Iterator ,且返回的每个成员(p1,p2,p3)都是 Promise 实例,如果不是,就会先调用的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。

    var p = Promise.all([1,2,3]);
    var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
    var p3 = Promise.all([1,2,3, Promise.reject(555)]);
    setTimeout(function() {
        console.log(p);// Promise { <state>: "fulfilled", <value>: Array[3] }
           console.log(p2); // Promise { <state>: "fulfilled", <value>: Array[4] }
        console.log(p3); // Promise { <state>: "rejected", <reason>: 555 }
    });
    p.then(function (posts) {
      // ..当有返回值的时候才会回调
    }).catch(function(reason){
      // ...
    });
    
    • p1,p2,p3中得实例都改变成 fulfilled(已成功)时,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。

    • p1,p2,p3中得实例其中一项的改变成 rejected(已失败)时,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

    • Promise.all()是异步解析,只有这当所有实例的状态都变成fulfilled,或者其中有一个变为rejected,才会调用Promise.all方法后面的回调函数then,catch方法。但是当且仅当传递的iterable为空时,Promise.all才会同步解析

      var p = Promise.all([]); 
      console.log(p);//Promise { <state>: "fulfilled", <value>: Array[0] }
      
    • 处理错误,常规情况下,当其中一个实例返回rejected,就会调用Promise.allcatch方法,返回第一个错误。但实际应用时,我们想让所有的实例不论成功或失败就可以返回参数组成数组,这时就可以调用实例自身的catch方法来规避这种情况。

      const p1 = new Promise((resolve, reject) => {
        resolve('hello'); //resolved
      }).then(result => result).catch(e => e);
      
      const p2 = new Promise((resolve, reject) => {
        throw new Error('报错了');//rejected
      }).then(result => result).catch(e => e);
      
      Promise.all([p1, p2])
      .then(result => console.log(result))// ["hello", Error: 报错了]
      .catch(e => console.log(e));
      
      

p1会resolved,p2首先会rejected,但是p2有自己的catch方法,该方法返回的是一个新的 Promise 实例,p2指向的实际上是这个实例。该实例执行完catch方法后,也会变成resolved,导致Promise.all()方法参数里面的两个实例都会resolved,因此会调用then方法指定的回调函数,而不会调用catch方法指定的回调函数。

  • js原生实现Promise.all的原理

    //在Promise类上添加一个all方法,接受一个传进来的promise数组
    Promise.all = function (promiseArrs) { 
       return new Promise((resolve, reject) => { //返回一个新的Promise
        let arr = []; //定义一个空数组存放结果
        let i = 0;
        function handleData(index, data) { //处理数据函数
            arr[index] = data;
            i++;
            if (i === promiseArrs.length) { //当i等于传递的数组的长度时 
                resolve(arr); //执行resolve,并将结果放入
            }
        }
        for (let i = 0; i < promiseArrs.length; i++) { //循环遍历数组
            promiseArrs[i].then((data) => {
                handleData(i, data); //将结果和索引传入handleData函数
            }, reject)
        }
        })
    }
    
  • 如果说all体验不好,那我们也可以自己做一个some方法,表示全部失败才算失败

    Promise.some = function (promiseArrs) {
      return new Promise((resolve, reject) => {
      let arr = []; //定义一个空数组存放结果
      let i = 0;
      function handleErr(index, err) { //处理错误函数
          arr[index] = err;
          i++;
          if (i === promiseArrs.length) { //当i等于传递的数组的长度时 
            reject(err); //执行reject,并将结果放入
          }
      }
      for (let i = 0; i < promiseArrs.length; i++) { //循环遍历数组
          promiseArrs[i].then(resolve, (e) => handleErr(i, e))
      }
      })
    }
    
  • Promise.allSettled – 兼容性不友好 该方法和promise.all类似,就是解决all方法在处理错误时的不合理而出现的。其参数接受一个Promise的数组, 返回一个新的Promise, 唯一与all的不同在于, 其不会进行短路, 也就是说当Promise全部处理完成后我们可以拿到每个Promise的状态, 而不管其是否处理成功。

    • 和all类似,当自身实例有catch回调时,每个实例状态变为fulfilled

      const p3 = new Promise((resolve, reject) => {
        resolve('hello'); //resolved
      }).then(result => result).catch(e => e);
      
      const p4 = new Promise((resolve, reject) => {
        throw new Error('报错了');//rejected
      }).then(result => result).catch(e => e);
      
      Promise.allSettled([p3, p4])
      .then(result => console.log(result))
      .catch(e => console.log(e));
      //.then的log
      //[{status: "fulfilled", value: "hello"},{status: "fulfilled", reason: Error: 报错了 at <anonymous>:6:10 at     new Promise (<anonymous>) at <anonymous>:5:13}]
      
    • 没有catch接收错误,返回自身的状态和回调参数

      const p5 = new Promise((resolve, reject) => {
        resolve('hello'); //resolved
      }).then(result => result)
      
      const p6 = new Promise((resolve, reject) => {
        throw new Error('报错了');//rejected
      }).then(result => result)
      
      Promise.allSettled([p5, p6])
      .then(result => console.log(result))
      .catch(e => console.log(e));
      //.then的log
      //[{status: "fulfilled", value: "hello"},{status: "rejected", reason: Error: 报错了 at <anonymous>:6:10 at     new Promise (<anonymous>) at <anonymous>:5:13}]
      
  • Promise.race()

该方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例,其他特点和all很像,和all的区别在于:race方法好比是赛跑,几个实例一起跑,谁先到就成功了,就resolve谁,或者谁跑到中途摔了出现异常状况失败了,就reject谁,不论成功还是失败,就先捕获第一个完成的。

  • 捕获第一个成功的实例回调函数

    let p1 = Promise.resolve('1')
    let p2 = Promise.resolve('2')
    Promise.race([p1,p2]).then(res=>conseloe.log(res))// '1'
    
  • 捕获第一个结果

    let p1 = Promise.resolve("1");
      let p2 = Promise.reject("ERR2");
     Promise.race([p1,p2]).then(res=>conseloe.log(res)) //Promise {<resolved>: "1"}
    
  • 捕获第一个错误

    let p1 = Promise.reject("ERR1");
      let p2 = Promise.reject("ERR2");
     Promise.race([p1,p2]).catch(console.log) //Promise {<reject>: "ERR1"}
    
  • 原生实现Promise.race()的设计原理

    Promise._race = iterator  =>{
        return new Promise((resolve,reject)=>{
            iterator.forEach(item=>{
                Promise.resolve(item).then(resolve).catch(reject)
            })
        })
    }
    
  • Promise.try-- 提案

在实际开发使用promise时,希望经过promise包装后的函数内部代码让同步函数同步执行,异步函数异步执行,并且让它们具有统一的 API 例:当同步函数被promise包装后的执行顺序改变。

let fn = () =>console.log('同步1');
Promise.resolve().then(fn)
console.log('同步2')
//log后
//'同步2'
//'同步1'
  • 解决让同步函数同步执行,异步函数异步执行现阶段方法

    • 方法一:使用async匿名函数,会立即执行里面的async函数,因此如果f是同步的,就会得到同步的结果;如果f是异步的,就可以用then指定下一步,如果想捕获错误,使用catch方法。

       let fn = () =>console.log('同步1');
       (async ()=>fn())()
       .then(resolve)
       .catch(err=>console.log(err))
       console.log('同步2')
       //log后
       //'同步1'
      //'同步2'
      
  • 方法二:使用promise立即执行的匿名函数

     let fn = () =>console.log('同步1');
    (
        () => new Promise(
           resolve => resolve(fn())
     ))()
    console.log('同步2')
    //log后
    //'同步1'
       //'同步2'
    
  • Promise.try的应用 该方法是用来模拟try的代码块的,就像promise.catch模拟的是catch代码块。

    • 理解 try catch finally

       try catch是JavaScript的异常处理机制,把可能出错的代码放在try语句块中,如果出错了,就会被catch捕获来处理异常。如果不catch 一旦出错就会造成程序崩溃。finally:无论结果如何,允许在 try 和 catch 之后执行代码。
      
      try {
              // 供测试的代码块
      }
       catch(err) {
               //处理错误的代码块
      } 
      finally {
               //无论 try / catch 结果如何都执行的代码块
      }
      
    • 应用

      let fn = () => console.log('同步1');
        Promise.try(fn);
        console.log('同步2');
        //'同步1'
        //'同步2'
      

over~有问题留言 拓展:

借鉴: https://blog.csdn.net/sjw1039… http://es6.ruanyifeng.com/#do… https://developer.mozilla.org…

[转载]原文链接:https://segmentfault.com/a/1190000020084602

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72602.html

文章标题:深度理解Promise--Promise的特点和方法详解

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
回到顶部