ES6 - promise对象

Promise的设计初衷

我们使用ajax请求数据,得到数据后再对数据进行操作,可是有时候,对得到的数据进行操作的过程中,可能又要用到ajax请求,这时,我们的代码就变成了这样:

$.ajax({

  success:function(res1){

    //...请求B开始,B依赖A返回的数据

    $.ajax({

      sucess:function(res2){

        //...请求C开始,C依赖B返回的数据

        $.ajax({

          sucess:function(res3){

          }

        });

      }

    });

  }

});

这种写法的不足:

(1)当多个请求层层依赖的话,就会很多层嵌套,代码的可读性会变得很差,也不利于调试,当一个逻辑层修改的时候可能会引起多个层的变化。

(2)如果C依赖于A和B的结果,但A,B彼此独立,按照上边的写法,B也要等A执行完之后才可以执行,消耗了更多的等待时间。

为了避免这种回调函数层层嵌套(回调地狱)的形式,ES6 给出了Promise。

  • Promise对象能使我们更加合理、更加规范的进行异步操作。

下面我们来正式介绍Promise。

(1)Promise的基本用法:

let pro=new Promise(function(resolve,reject){

});

Promise对象是一个全局对象,创建Promise实例的时候,参数是一个匿名函数,其中有两个参数:resolve,reject。

这两个参数均为方法,resolve方法处理一步操作成功后的业务,reject方法处理业务操作失败后的业务。

(2)Promise的三种状态

  • pending:刚刚创建一个Promise实例的时候,表示初始状态。
  • fulfilled:resolve方法调用的时候,表示操作成功。
  • rejected:reject方法调用的时候,表示操作失败

状态的转化只能是:初始态(pending)->成功(fulfilled),或者,初始态(pending) ->失败(rejected) (不能逆向转换,也无法在成功与失败之间转换)

let pro=new Promise(function(resolve,reject){

  //实例化后的状态:pending

  if(成功){

    resolve();    //状态:fulfiled

  }else{

    reject();    //状态 : rejected

  }

});

(3)then()方法

用于绑定处理操作后的处理程序。

pro.then(function(res){

  //操作成功的处理程序

  },function(error){

  //操作失败的处理程序

})

(3)catch()方法

对于操作异常的程序,使用catch()方法。

pro.catch(function(error){

  //操作失败的处理程序

});

当操作层层依赖的时候,Promise的处理方法:

看一个完整的案例:

let pro=new Promise(function(resolve,reject){

  if(true){

    resolve();

  }else{

    reject();

  }

});

//用then处理操作成功,用catch处理操作异常

pro.then(requestA)

  .then(requestB)

  .then(requestC)

  .catch(requestError);

function requestA(){

  console.log(‘Aok‘);

  return ‘next B‘;

}

function requestB(res){

  console.log(‘Aresult:‘+res);

  console.log(‘Bok‘)

  return ‘next C‘;

}

function requestC(res){

  console.log(‘Bresult:‘+res);

  console.log(‘Cok‘)

}

function requestError(){

  console.log(‘false‘);

}

//结果:

Aok

Aresult:next B

Bok

Bresult:next C

Cok

可以看出,使用then方法,三个请求不必在层层嵌套。当B依赖A时,我们使用return将A的结果返回,B使用参数接受这个结果

几个重要的方法:

(1)Promise.all()

接受一个数组作为参数,数组的元素是Promise实力对象,当参数中对象的状态全部返回fulfilled的时候,Promise才会返回。

let pro1=new Promise(function(resolve){

  setTimeout(function(){

    resolve(‘eg1_ok‘);

  },5000);

});

let pro2=new Promise(function(resolve){

  setTimeout(function(){

    resolve(‘eg2_ok‘);

  },2000);

});

Promise.all([pro1,pro2]).then(function(result){

  console.log(result);   //[‘eg1_ok‘,‘eg2_ok‘]

}) //在等待pro1,pro2都进入fulfilled状态(5000ms)后,promise.all() 才执行。

当我们执行的某个操作需要多个接口返回的数据来支持,而这多个接口又是互不依赖的,这时候我们就可以用Promise.all(),它会在所有的接口都请求成功后才操作。

(2)Promise.race()方法

与Promise.all()的区别在于,所有的参数实例中,只要又一个状态变化(无论成功还是失败),就会执行,其他实例中再发生变化,它也不管了。

let pro1=new Promise(function(resolve){

  setTimeout(function(){

    resolve(‘eg1_ok‘);

  },5000);

});

let pro2=new Promise(function(resolve){

  setTimeout(function(){

    reject(‘eg2_false‘);

  },2000);

});

Promise.race([pro1,pro2]).then(function(result){

  console.log(result);

}).catch(function(error){

  console.log(error)

});

//eg2_false

_______________

参考:公众号 web前端教程

时间: 2024-10-12 03:04:04

ES6 - promise对象的相关文章

ES6 Promise 对象

es6 Promise 对象是异步编程的一种解决方案.(在javascript世界里,是单线程顺序执行的)从语法上说,Promise 是一个对象,从它可以获取异步操作的消息. Promise 异步操作有三种状态:pending(进行中).fulfilled(已成功)和 rejected(已失败).除了异步操作的结果,任何其他操作都无法改变这个状态.Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变.只要处于 fulfi

ES6 Promise对象

Promise  ,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. Promise 对象有以下两个特点. (1)对象的状态不受外界影响. Promise 对象代表一个异步操作,有三种状态: Pending (进行中). Resolved (已完成,又称 Fulfilled )和 Rejected (已失败).只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态. (2)一旦状态改变,就不会再变,任何时候都可以得到这个结果. Promis

ES6 Promise对象(七)

一.Promise介绍1.Promise简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果2.Promise可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数.此外,Promise对象提供统一的接口,使得控制异步操作更加容易 二.基本用法[使用时注意环境及异步操作相关包安装]在node环境中使用ajax时需要安装jsdom.jqury包配置常量: //创建window环境 const {JSDOM} = require('jsdom'); const

Promise 对象

es6 Promise 对象 定义参考 案例源码 戳这里 ps:每个案例都是基于上一个改造的 一.Promise 简介 Promise 是一个对象,从它可以获取异步操作的消息 案例1 新建项目 [demo] |-- src |-- index.html |-- index.js |-- webpack.config.js |-- package.json demo/package.json { "name": "webpack", "version&quo

ES6深入学习记录(二)promise对象相关

1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步的操作)的结果.从语法上说,Pormise是一个对象,从它可以获取异步操作的消息.Promise提供统一的API.各种异步操作都可以用同样的方法进行处理. Promise对象的两个特点: 1.对象的状态不受外界影响.Promis

ES6的promise对象应该这样用

ES6修补了一位Js修真者诸多的遗憾. 曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的缺点,而又无法忽略的是也正因为这一点,node.js处理并行的能力被人看作优点,在我看来,这其实有着些讽刺的意味,就好像踢足球时有的人总夸你腿短,所以频率快下盘稳好控球...好在js从出生以来就有一种独特的特质,就是模仿,对,就是模仿,模仿别人的优点来补足自己,同时保持自己的长处. ES6就是通过P

es6中的promise对象

Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resolved(已经完成)和Rejected(已失败) ES6规定,Promise对象是一个构造函数,用来生成Promise实例. var promise=new Promise(function(resove,reject){ if (/* 异步操作成功 */){ resolve(value); } el

ES6学习笔记--promise对象

Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和更强大.它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象. Promise对象有以下两个特点. (1)对象的状态不受外界影响.Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和Rejected(已失败).只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.这也是Promi

es6 之 promise 对象

异步编程 传统方案:事件 + 回调函数 ES6 的新方案:Promise 对象 Promise 异步操作有 3 种状态 pending: 进行中 resolved: 已完成 rejected: 已失败 Promise 异步操作的状态变化仅限下面两种方式 pending –> resolved pending –> rejected 创建一个 Promise 实例: promise 构造函数接收一个函数作为参数,并且这个函数有两个参数,这两个参数是也是两个函数,不过这两个函数由 JavaScri