ES6 Promise 对象 详解新特性

Promise 对象
Promise 是个啥?

是异步编程的一种解决方案,其实是一个对象,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。

  1. 主要用于异步计算.
  2. 可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果.
  3. 可以在对象之间传递和操作promise,帮助我们处理队列.
        

通俗点 , 我们可以借用Promise对象来做到满足某个条件在进行下一步操作,不满足则不执行下一步操作 . 也就满足 , 上一步的成功是下一步开始的前提条件.

特点:

         对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
    
        一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。


用法

咱们先看段代码

//写一个判断年龄的方法
function judge(age){	
    //创建一个Promise对象
    let p1 = new Promise(function(resolve,reject){
     if(age >= 18){
      resolve(age); //此方法会导致Promise的状态变为 fulfilled(成功),并且携带数据(带着age值)
     }else{
      reject("对不起! 你"+age+"岁,还未成年!");   //此方法会导致Promise的状态变为 rejected(失败),也可携带数据.
     }
    });
    //返回 Promise对象
    return p1;
};
//接受输入的年龄   
let age = prompt("请输入你的年龄!");

//调用judge方法. then()方法里有2个函数,
//第一个是表示Promise对象状态为成功执行的函数,
//第二个表示Promise对象状态为失败执行的函数.
judge(age).then(
    function(data){
     alert("你"+data+"岁咯,可以进入网吧!");     
    },
    function(data){
     alert(data);
    }
);

我们运行如上代码 :

输入年龄为 19

在这里插入图片描述
提示可以进入网吧.

在这里插入图片描述
在试一次,输入年龄为 10

在这里插入图片描述
提示,未成年!

在这里插入图片描述


上面呢,演示了如何使用 Promise 对象,但没有体现它的独特的优势 ,甚至有些小伙伴会想,这功能用 if 判断不简单的多么 .首先Promise 解决异步编程的一种方案,那我们就模拟下遇到以下的情况:(上代码)

//函数a
function a(){return 1;};
function b(){return 2;};
console.log(a());
console.log(b());

看到以上代码我们知道结果肯定是先输出1,在输出2嘛.我们知道网络延迟是常有的情况,那当异步请求时执行a函数遇到延迟,函数b需要依赖函数a的某个参数时,那岂不是导致a的参数还没执行完,就执行b去了,这不是我们想要的.就会导致出错.上码:

//我们给第一个函数用定时器模拟延迟2秒的效果.
setTimeout(function(){
    console.log(1);
   },2000);                   
   
   function a(){
    console.log(2);
   }
   a();

因为网络的延迟啊,结果是先输出2,在输出1.
这时有小伙伴会想,既然它遇到某些情况内部不会完全按照字面代码的顺序去执行,那我们可以嵌套的写法不就行了嘛,对是可以的.能解决上面出现的问题,可是呢,如果工程量大,嵌套一多起来,那不得脑壳大.所以为了解决这样的问题,ES6中就扩展了 Promise 这么个对象.更加简洁的完成异步编程需求.

相信看到这里大家对 Promise 对象有了初步的了解,下面咱们继续说说它.

Promise状态也有缺点,如下:

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

咱们在上面的代码中可以看到Promise对象的 then()方法起到不小的作用.

then 方法接收两个函数作为参数,第一个参数是 Promise 执行成功时的回调,第二个参数是 Promise 执行失败时的回调,两个函数只会有一个被调用。

then()方法的特点:

  • 在 JavaScript 事件队列的当前运行完成之前,回调函数永远不会被调用(咱们也是利用此特点呢去进行相关的异步代码操作)。
  • (链式调用)通过 .then 形式添加的回调函数,不论什么时候,都会被调用。并且可以添加多个回调函数,它们会按照插入顺序并且独立运行。

使用then()方法也需要注意:

  • 简便的 Promise 链式编程最好保持扁平化,不要嵌套 Promise。
    注意总是返回或终止 Promise 链。
  • 创建新 Promise 但忘记返回它时,对应链条被打破,导致后面的同时进行。
  • 大多数浏览器中不能终止的 Promise 链里的 rejection,建议后面都跟上 .catch(error => console.log(error));

all方法

与then同级的另一个方法,all方法,该方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后并且执行结果都是成功的时候才执行回调。

//当需要多个的请求返回结果后,才能进行下一步操作,这个时候就可以使用all方法
loadimg(a).then(function(data){
    console.log("1功");
    return loadimg(a);
   }).then(function(data){
    console.log("2成功");
    return loadimg(a);
   }).then(function(data){
    console.log("3成功");
    return loadimg(a);
   }).all(function(data){
    console.log("全部成功!");
   });

今天的分享就告一段落咯 , 接下来还会继续更新ES6相关的内容,看到这相信大家眼睛也疲惫了,赶紧放松放松吧 !

原创文章 7 获赞 31 访问量 3327

猜你喜欢

转载自blog.csdn.net/AKALXH/article/details/105841070