异步编程--Promise基本使用

首先看一个例子：

<script> 
var a = 1;	
setTimeout(() => {
    a = 10;
}, 2000);
console.log(a);
</script>

上面是一个异步任务，setTimeout两秒后才会执行，所以控制台会打印1。要想打印10，就可以把console.log(a)放在里面即：

<script> 
var a = 1;	
setTimeout(() => {
    a = 10;
    console.log(a);
}, 2000);
</script>

这样依然会导致回调地狱，层层嵌套的问题，这个时候就可以用promise试试。

Promise对象     基本使用     

new Promise(function(resolve, reject) {       

      // ... 要执行的（异步）任务   

 })

所以上面的代码可以改造成

        new Promise( (resolve, reject) => {
			    setTimeout(() => {
				a = 10;
			}, 2000);
		} );

接下来讲解几个关键的知识点

Promise状态：[[PromiseStatus]]   

 - pending：初始状态，既不是成功，也不是失败状态   

 - fulfilled/resolved：意味着操作成功完成     

 - rejected：意味着操作失败

 Promise状态：[[PromiseStatus]]   

 - resolve()函数：更改Promise对象为成功状态     

 - reject()函数：更改Promise对象为失败状态

 then方法     

任务后续处理函数，一般情况下处理某个Promise任务完成（无论是成功还是失败）的后续任务   

.then(onFulfilled/onResolved, onRejected)         

              onFulfilled/onResolved：fulfilled/resolved状态下调用         

              onRejected：rejected状态下调用

懵逼了有木有，来一个例子看看

	<script type="text/javascript">
		var a = 1;
		let p1 = new Promise( (resolve, reject) => {
			// 要执行的异步任务
			/**
			 * resolve：函数，当我们调用该函数的时候，可以把当前Promise对象的任务状态该成resolved
			 * reject：函数，当我们调用该函数的时候，可以把当前Promise对象的任务状态该成rejected
			 *
			 * 只要Promise的任务状态发生了变化，这个Promise对象的then方法就会被执行
			 */
			setTimeout(() => {
				a = 10;
				// resolve();	//resolved
				reject();	//rejected
			}, 2000);
		} );

		p1.then( () => {
			// then方法就是Promise处理完任务以后继续执行的任务
			console.log(a);
		}, () => {
			console.log('失败了');
		} );

	</script>

关于 resolve()、reject()这两个函数传参还有要注意的地方

Promise值：[[PromiseValue]]     

      任务处理完成（成功或失败），返回的值，通过 resolve()、reject() 函数传入             

             resolve(1)、reject(1)         

             onFulfilled/onResolved, onRejected 函数接收             

            .then(val=>console.log(val), ...)

看下面的例子

<script type="text/javascript">
		/**
		 * Promise
		 * 	构造函数，通过Promise来构建一个异步任务处理对象
		 */
		new Promise( (resolve, reject) => {
			/**
			 * resolve, reject这两个函数是可以传入参数的，传入的参数将被传递给then中的函数进行使用
			 */
			setTimeout(() => {
				var a = 10;
				// resolve(a);
				reject('出错了');
			}, 2000);
		} ).then( v => {
			console.log(v);
		}, err => {
			console.log(err);
		});
</script>

控制台会打印“出错了”。