浅析 Promise

4
分享 2018-07-10
浏览器支持

推荐使用Chrome以及Firefox浏览器

开局放图,忍不住吐槽一下----垃圾IE!!。

    首先解释为什么要写这篇文章。在现实的项目中存在一种情况,要做多步Query,并在所有的Query都返回结果之后再进行下一步的操作。这时候就要用到了promise.all(iterable)。Query的参考:https://developers.arcgis.com/ ... query。所以在这里写了一篇对于Promise的理解。如有错误望斧正。

什么是Promise

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
Promise 对象表示异步操作的最终完成(或失败)及其结果值。也就是说他是异步编程的一种解决方案,它的好处在于,有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象还提供了一整套完整的接口,使得可以更加容易地控制异步操作。Promise对象的概念的详细解释,请参考《JavaScript标准参考教程》

构造函数

Promise 由关键字new以及其构造函数(executor function)进行创建。该处理函数会接收两个函数----resolve以及reject作为参数,当处理成功且返回结果时会调用resolve函数,反之当异步任务失败并返回失败原因时会调用reject函数。

const myPromise = new Promise((resolve,reject) =>{
if(/*异步操作成功*/) {resolve(someValue)}
else{/*异步操作失败*/ reject("失败原因")}
})



简单的示例:

let myFirstPromise = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("成功");
}, 500);});
myFirstPromise.then(function(successMessage){
//successMessage的值是上面调用resolve(...)方法传入的值.
console.log("Yay! " + successMessage);
});




Promise.prototype.then()

Promise 对象有以下几种状态:

pending:初始化状态,既不是成功,也不是失败
fulfilled:操作成功
rejected:操作失败



所以Promise 对象只能由pending状态变成fulfilled状态并传递成功信息或者由pending状态转换为rejected状态并传递失败原因。当这两种情况发生时就可以调用Promise的then方法中绑定的处理方法(handles)。then()最多需要有两个参数:Promise 的成功(onfulfilled )和失败(onrejected)情况的回调函数。并且因为Promise.prototype.then()以及下边要写到的Promise.prototype.catch方法返回的都是promise对象,所以他们可以被链式调用。

简单示例:

//语法
p.then(function(value) {
// fulfillment
}, function(reason) {
// rejection
});
//示例
let mypromise = new Promise(function(resolve, reject) {
resolve('Success!');
});
mypromise.then(function(value) {
console.log(value); // expected output: "Success!"
});



链式调用示例:

var promise = new Promise(function(resolve, reject) {
resolve(1);
});
promise.then(function(val) {
console.log(val); // 1
return val + 2;
}).then(function(val) {
console.log(val); // 3
})




Promise.prototype.catch()

catch()then()一样都会返回一个Promise,它用来处理失败的情况。类似于then()Promise.prototype.then(undefined, onRejected)
简单示例:

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







Promise.prototype.finally


finally()方法同catch()类似,都像是then()的一个语法糖,不同的是catch是在rejected时调用,而finally则是在promise状态settled“已凝固”(fulfilled或者rejected)之后调用。参考:http://web.jobbole.com/94780/

Promise.all()

promise.all(iterable)可以说非常实用。实际编程中经常遇到,有多个异步,想等所有异步返回结果之后,对结果进行下一步的操作,那么promise.all(iterable)就可以帮助你实现。它同样会返回一个promise实例,当iterable参数内的所有promise都完成或者参数中不包含有promise时回调完成。当参数内有任意一个promise失败,则回调失败并返回第一个失败promise的结果。
简单示例:

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values); //Array [3, 42, "foo"]
});



参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
如有错误望斧正。
作为一个90后,既然早早地抱起了保温杯,泡上了枸杞水,那就认真地过好每一天吧。

文章来源:http://www.jianshu.com/p/667c61391f6e

3 个评论

Merry GISmas!
Merry GISmas!
Merry GISmas!

要回复文章请先登录注册