当前位置:首页 > 日记 > 正文

ES6新特性六:promise对象实例详解

ES6新特性六:promise对象实例详解

本文实例讲述了ES6新特性之promise对象。分享给大家供大家参考,具体如下:

1. promise 介绍

它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样;其次,它起到代理作用(proxy),充当异步操作与回调函数之间的中介。它使得异步操作具备同步操作的接口,使得程序具备正常的同步运行的流程,回调函数不必再一层层嵌套。

它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程。这个Promises对象有一个then方法,允许指定回调函数,在异步任务完成后调用。

异步操作f1返回一个Promise对象,它的回调函数f2写法如下

(new Promise(f1)).then(f2);

2. promise 对象的三种状态

① 异步操作未完成(pending)
② 异步操作已完成(resolved)
③ 异步操作失败(rejected)

3. 工作过程

Promise对象使用then方法添加回调函数。then方法可以接受两个回调函数,第一个是异步操作成功时(变为resolved状态)时的回调函数,第二个是异步操作失败(变为rejected)时的回调函数(可以省略)。一旦状态改变,就调用相应的回调函数,这两个回调函数都接受异步操作传回的值作为参数

promise.then( console.log, console.error);

4. then 的链式使用

① 首先then方法返回的一个新的promise对象,因此可以采用链式写法。

② then方法的第一个参数是Resolved状态的回调函数,第二个参数(可选)是Rejected状态的回调函数。

③ 如下,promise的状态一旦变为resolved,就依次调用后面每一个then指定的回调函数,每一步都必须等到前一步完成,才会执行。最后一个then方法的回调函数console.log和console.error,用法上有一点重要的区别。console.log只显示回调函数step3的返回值,console.error可以显示step1、step2、step3之中任意一个发生的错误,Promises对象的错误有传递性。

promise .then(step1) .then(step2) .then(step3) .then(  console.log,  console.error );

5. promise 对象的使用

var promise = new Promise(function(resolve, reject) { // promise的构造函数,Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject // 异步操作的代码 if (/* 异步操作成功 */){  resolve(value);//将异步的操作结果作为参数传递出去 } else {  reject(error); }});

其中resolve和reject它们是两个函数,由JavaScript引擎提供,不用自己部署。

resolve函数的作用:将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

reject函数的作用:将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

① 下面是一个用Promise对象实现的Ajax操作的例子

var getJSON = function(url) { var promise = new Promise(function(resolve, reject){  var client = new XMLHttpRequest();  client.open("GET", url);  client.onreadystatechange = handler;  client.responseType = "json";  client.setRequestHeader("Accept", "application/json");  client.send();  function handler() {   if (this.readyState !== 4) {    return;   }   if (this.status === 200) {    resolve(this.response);//会将参数传递给回调函数   } else {    reject(new Error(this.statusText));   }  }; }); return promise;};getJSON("/posts.json").then(function(json) { console.log('Contents: ' + json);}, function(error) { console.error('出错了', error);});

② resolve函数的参数除了正常的值以外,还可能是另一个Promise实例,即一个异步操作的结果是返回另一个异步操作。

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

6.Promise.prototype.catch()

① 一个 Promise 对象,如果异步操作抛出错误,状态就会变为Rejected,就会调用catch方法指定的回调函数,处理这个错误。

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

② 另外,then方法指定的回调函数,如果运行中抛出错误,也会被catch方法捕获。

var promise = new Promise(function(resolve, reject) { throw new Error('test');});promise.catch(function(error) { console.log(error);});// Error: test

③ 另外两种写法

// 写法一var promise = new Promise(function(resolve, reject) { try {  throw new Error('test'); } catch(e) {  reject(e); }});promise.catch(function(error) { console.log(error);});// 写法二var promise = new Promise(function(resolve, reject) { reject(new Error('test'));//reject方法的作用,等同于抛出错误});promise.catch(function(error) { console.log(error);});

④ Promise 在resolve语句后面再抛出错误不会被捕获。因为 Promise 的状态一旦改变,就永久保持该状态,不会再变了。

var promise = new Promise(function(resolve, reject) { resolve('ok'); throw new Error('test');});promise .then(function(value) { console.log(value) }) .catch(function(error) { console.log(error) });// ok

7 Promise.all()

参数为Promise 对象的数组;将多个Promisre 对象包装成一个新的Promise 对象,如果数组中不是Promise 对象,就会自动调用 Promise.resolve方法,将参数转为Promise实例,再进一步处理。(Promise.all方法的参数可以不是数组,但必须具有Iterator接口,且返回的每个成员都是Promise实例)

var p = Promise.all(promises).then(function (posts) { // ...}).catch(function(reason){ // ...});

① 只要promises之中有一个状态变为rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
② 如果全部都变为resolved;此时 promises 数组中所有对象的返回值组成一个数组,传递给p的回调函数。

8 Promise.resolve()

将现有对象转为 Promise对象,Promise.resolve方法就起到这个作用。

Promise.resolve('foo')// 等价于new Promise(resolve => resolve('foo'))

① 参数为Priomise 对象,Promise.resolve() 不做任何处理。
② 参数是一个具有 then 方法的对象:Promise.resolve方法会将这个对象转为Promise对象,然后就立即执行thenable对象的then方法。

let thenable = { then: function(resolve, reject) {  resolve(42); }};let p1 = Promise.resolve(thenable);//p1为一个状态已经是resolved 的promise对象.p1.then(function(value) { console.log(value); // 42});

③ 参数不是具有then方法的对象,或根本就不是对象

该参数变为生成的 Promise 对象的 resolve() 的参数。

var p = Promise.resolve('Hello');//Hello 会传递给 p 的resolve()p.then(function (s){ console.log(s)});// Hello

希望本文所述对大家ECMAScript程序设计有所帮助。

相关文章

怎么在ppt2013中设置文本虚线框

怎么在ppt2013中设置文本虚线框

设置,文本,虚线,方法,电脑软件,  PPT演讲的成功,不单单是取决于PPT使用和制作技术方面的技巧,还有制作思路方面的学问、演讲方法与技巧等诸多方面。PPT演讲的成功,不单单是取决于PPT使用和制作技术方面的技巧,还有制作思路方面的学问、演…

ECMAScript6--解构

ECMAScript6--解构

电脑软件,大致介绍解构:就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应,并将变量相对应元素进行赋值数组解构例子:let [a,b,c] = [1,2,3]; console.log(a); //1 console.log([a,b,c]); //[1, 2, 3]可以看到,数组中的a,b,c…

ps怎样合成多张照片

ps怎样合成多张照片

照片,方法,多张,电脑软件,ps,  照片如果感觉太单薄,大家可以使用ps来进行合成。很多刚学习的新手小伙伴可能还不知道,下面是小编带来关于ps怎样合成多张照片的内容,希望可以让大家有所收获!ps合成多张照片的方法一、将一张照片粘贴至另一张…

js css自定义分页效果

js css自定义分页效果

分页,自定义,效果,电脑软件,js,网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配mvc和数据库效果图片先来css(样式不喜欢的话可以不用这个).pagelist {padding:10px 0; text-align:center;}.pagelist span,.pageli…

JavaScript中闭包的详解

JavaScript中闭包的详解

闭包,详解,电脑软件,JavaScript,闭包是什么在 JavaScript 中,闭包是一个让人很难弄懂的概念。ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。是不是看完这个定义感觉更加…

ppt怎么实现局部区域的黑底白字效

ppt怎么实现局部区域的黑底白字效

区域,白字,黑底,局部,效果,  ppt怎么实现局部区域的黑底白字效果?PPT制作是信息时代下的产物,ppt具有较好的展示功能,能够形象生动的表达意愿和目的;下面小编来告诉你吧。ppt实现局部区域的黑底白字效果的方法:  ①启动PowerPoint2003,插…

怎么在word中给文章添加脚注在word

怎么在word中给文章添加脚注在word

步骤,方法,脚注,文章,电脑软件,  在日常办公室里,我们写文档的时候有时候要注释脚注,如果是新手的话就摸不着头脑,下面小编就教你怎么在word中给文章添加脚注。word中给文章添加脚注的步骤首先打开word文本word中给文章添加脚注的步骤图1 …

node.js实现的装饰者模式示例

node.js实现的装饰者模式示例

装饰者模式,示例,电脑软件,node,js,本文实例讲述了node.js实现的装饰者模式。分享给大家供大家参考,具体如下:装饰者模式的实现更强调类的组合而不是通过继承。这样可以增强灵活性。在node.js 中,可以通过call函数实现。call函数可以在一个对…

怎么去除wrod的背景色去除wrod的背

怎么去除wrod的背景色去除wrod的背

背景色,方法,背景颜色,教程,步骤,  word的背景色大概有三种,一种是页面背景,不管有没有字,页面都是呈现背景色;还有一种所示突出显示,为了让文字突出,给其添加了背景色;最后一种是字符底纹,就是凡是有字的地方就添加上一个底纹颜色。下面小编就…

Angularjs中的ui-bootstrap的使用

Angularjs中的ui-bootstrap的使用

使用教程,电脑软件,Angularjs,ui,bootstrap,1.新建uiBootstrap.html页面,引入依赖的js和css类库2.新建uiBootstrap.js文件,定义一个uiModule 模块,引入依赖的模块/** * Created by zhong on 2015/9/7. */var uiModule = angular.module("uiMo…

jQuery中的deferred使用方法

jQuery中的deferred使用方法

使用方法,电脑软件,jQuery,deferred,deferred简介deferred对象是jQuery的回调函数解决方案,jQuery之前的版本中异步回调这块做的不是很好,所以后期补上了该解决方案。普遍的ajax操作方式我们先来回顾一下jQuery中普通的ajax操作$.ajax({ url:…

word设置表格表头的方法Word怎样设

word设置表格表头的方法Word怎样设

设置,表头,方法,表格,技巧,  在制作表格时,经常回遇到制作表头的情况,那么应该如何制作表头呢?其实制作标题的方法很简单,接下来小编举例简单的例子告诉大家word设置表格表头的方法,希望能帮到大家。word设置表格表头的方法打开word,如果插入…