通过故事学习ES6 Promise

Promise是ES6中为解决“回调地狱”等问题而给出的优雅解决方案。刚接触时，非常不容易理解。最近看到一篇国外的博客，以讲故事的形式，通俗易懂地讲解Promise，在此推荐给大家。故事概要：妈妈答应下周为你买一部新手机。如果妈妈的承诺兑现了，你就把新手机展示给别人看。言为之意，如果妈妈改变主意了，那就不展示了。

//ES6
const isMomHappy = true;

// 1st Promise
const willGetNewPhone = new Promise((resolve, reject) => {
	if (isMomHappy) {
		const phone = {
			brand: 'Samsung',
			color: 'black'
		};
		resolve(phone); // fulfilled
	} else {
		const reason = new Error('mom is not happy');
		reject(reason); // reject
	}
});

// 2nd Promise
const showOff = function(phone) {
	return new Promise((resolve, reject) => {
		const message = 'Hey friend, I have a new ' +
		    phone.color + ' ' + phone.brand + ' phone';
		resolve(message);
	});
};

// 等价于 2nd Promise
var showOff02 = function(phone) {
	const message = 'Hey friend, I have a new ' +
		    phone.color + ' ' + phone.brand + ' phone';
								
	return Promise.resolve(message);
};

// call our promise
const askMom = function() {
	willGetNewPhone
	.then(showOff) // chain it here
	.then(fulfilled => console.log(fulfilled))
	.catch(error => console.log(error.message))
};

askMom();

这里以“妈妈高兴”表示异步调用成功，“妈妈不高兴”表示失败。

直接使用构造函数定义第一个Promise对象。对于resolve(phone)，可以理解为：本次异步操作成功了，并把成功的喜悦传递给下游的Promise。对于reject(reason)，可以理解为：本次异步操作失败了，并把失败原因传递给下游。

使用匿名函数包裹Promise对象。该Promise很乐观，如果上游传来成功的消息，他就把消息加工一下再次传递给下游。如果失败了什么也不做，直接传递给下游。showOff02是一种等价的写法。

把这些Promise像糖葫芦一样串起来。fulfilled => console.log(fulfilled)，使用了箭头函数定义了一个Promise，如果成功了，就打印成功的消息。这里的成功和单词fulfilled没有半毛钱关系，这里只有一个参数，而Promise构造函数的第一个参数表示成功。如果失败了什么也不做，直接传递给下游。
.catch(...)捕获上游传递下来的Error或者失败（reject），这和Java里的catch有些差别，后者捕获检查异常或运行期异常。从error.message可以看出，这里打印的是Error信息。

这串糖葫芦的味道就是：
如果妈妈为我买了新手机，把成功的消息，即手机品牌、颜色，传递给下游；
上游传来了成功的消息，加工一条字符串，并作为成功的消息传递给下游；
上游传来了成功的消息，打印消息。把成功传递给下游，无成功的消息；
上游没有失败的消息和异常消息，保持沉默；
结束。

资料：https://scotch.io/tutorials/javascript-promises-for-dummies

通过故事学习ES6 Promise

猜你喜欢