JavaScript Promise 详解

Promise 介绍

Promise 是一个构造函数，自己身上有 all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。

promise 在 js 中主要作用是解决异步回调问题，异步任务中嵌套异步任务会导致我们的代码臃肿，而 promise 链式调用解决这种代码问题。

promise 有3种状态，pending(运行种) fulfill(成功) reject(失败)

pending->fulfill状态的改变调用的是resolve(data),其中的参数是promise成功状态时的结果

pending->reject状态的改变调用的时reject(error),参数是失败状态的结果

状态的改变调用 promise 原型方法上面的 .then()方法，.then方法有两个回调函数 一个接收成功value数据，一个接收失败的reason数据。

普通异步示例

<script>
console.log('主线程开始');
// 使用延时函数产生异步
// 将一个函数作为异步函数的参数，待异步执行完毕时调用
function demo(func){
	setTimeout(()=>{
		let result = 0;
		for (let i = 0; i < 100000000; i++){
			// your code 
			result = i;
		}
		console.log('循环执行完毕，执行异步回调函数');
		func(result);
	}, 2000);
}
demo((result)=>{
	console.log('循环结果 : ' + result);
});
console.log('优先与上面的循环执行');
</script>

使用 promise 的示例

<script>
console.log('主线程开始');
// 使用延时函数产生异步
// 将一个函数作为异步函数的参数，待异步执行完毕时调用
var p = new Promise((resolve, reject)=>{
    setTimeout(()=>{
    	let result = 0;
    	for (let i = 0; i < 1000000; i++){
    		// your code 
    		result = i;
    	}
    	resolve(result);
    }, 2000);
});
console.log(p);
// 异步函数执行完毕后执行此处的逻辑
p.then((res)=>{
	console.log(res);
});
console.log('其他逻辑');
</script>

通过上面的例子，您可以看到我们在异步函数中通过 resolve 函数对异步函数进行了“成功”标记，当异步函数运行成功后会修改 p 对象的状态，告知异步逻辑执行成功，然后通过 then 函数完成链式操作（ 简化您的异步嵌套逻辑 ）。

通过上面的代码我们可以看到“异步还是异步，但是逻辑变得简单了 ”。