ES6(一):Promise对象 - 蓝蓝设计_UI设计公司

ES6(一):Promise对象

2018-4-3 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

介绍Promise

promise的概念和实现最初来源于社区,用于解决异步编程的回调嵌套问题,即将多级的嵌套改良成顺序的代码行。ES6将其写入了语言标准,统一了用法,提供了原生的Promise。

Promise是一个构造函数,用于生成一个Promise实例。Promise实例代表一次异步操作。 它只可能有3种转态,分别是Pending(未决议)Resolved(完成) 和 Rejected(出错) 。

创建一个Promise实例时,其处于Pending状态,当异步操作完成,执行回调函数的时候,根据回调函数中的err的值,如果err 为空则异步操作成功,否则异步操作失败。此后,Promise实例的状态将不再改变。

Promise实例

var pro = function () { return new Promise(function(resolve, reject) { fs.readdir(_dirname, function(err, data) { if (err) {
                reject(err); //失败则将Promise对象置为rejected状态 } else {
                resolve(data); //成功则将Promise对象置为resolved转态 }
        });
    });
} /*pro是一个函数
 调用该函数返回一个Promise实例
*/ var promiseObject = pro(); /*then方法执行Resolved和Rejected状态的回调函数*/ promiseObject
.then(doneCallbacks, failCallbacks)
.catch(function(err) { console.log(err);
}); var doneCallbacks = function(data) { console.log(data);
}; var failCallbacks = function(err) { console.log(err)
};
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

catch是then的一个语法糖,相当于

promiseObject.then(undefined, function(err) {
    console.log(err)
});
	
  • 1
  • 2
  • 3

Promise对象的错误具有向后传递的性质,因此,如果在调用过程抛出异常,则异常总能被最后一个catch捕获。这也是为什么我们习惯在then的调用后跟随一个catch调用。

then的链式写法

then 方法是定义在构造函数Promise 的原型对象上的。这个方法为Promise实例添加状态改变时的回调函数。then方法返回一个新的Promise实例,因此then方法后面可以调用then()方法。传给then()方法的函数,可返回三类值,分别如下:

  • 一个Promise实例
  • 一个普通值
  • 抛出一个异常

如果返回的是一个新的Promise对象,则下一级的then接收函数在这个Promise实例 状态发生改变时被触发执行。因此,then的链式写法,可以按顺序执行一系列的异步操作,并且后一个异步操作在前一个完成之后开始。如下代码实例所示:

var fs = require('fs'); var pro = function () { return new Promise(function(resolve, reject) { fs.readdir(_dirname, function(err, data) { if (err) {
                reject(err); //失败则将Promise对象置为rejected状态 } else {
                resolve(data); //成功则将Promise对象置为resolved转态 }
        });
    });
} var newPro = function(data) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(data);
        },2000);
    });
}; /*pro是一个函数
 调用该函数返回一个Promise实例
*/ var promiseObject = pro(); /*then方法执行Resolved和Rejected状态的回调函数*/ promiseObject
    .then(function(data){ console.log("fisrt sync op");
        console.log(data); return newPro(data);//返回一个新的Promise对象 })
    .then(function(data) { console.log("second sync op");
        console.log(data);//两秒钟后才会被执行 })
    .catch(function(err) { console.log(err);
    });

promiseObject.then(undefined, function(err) { console.log(err)
}); var doneCallbacks = function(data) { console.log(data);
}; var failCallbacks = function(err) { console.log(err)
}; 
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

把上一级异步调用的结果返回给下一级调用,then这样的链式写法,解决了回调函数的多层嵌套调用。

解决异步嵌套回调的更多方案

“回调金字塔”

多层嵌套

bluebird库 + Generator

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


标签: ES6(一):Promise对象


Powered by emlog 京ICP备12006971号-1 sitemap