Promise

自ES6 Promise用法小结的笔记

Promise

<div onClick={promiseClick}>开始异步请求</div>
 
const promiseClick =()=>{
	 console.log('点击方法被调用')
	 let p = new Promise(function(resolve, reject){
		//做一些异步操作
		setTimeout(function(){
				console.log('执行完成Promise');
				resolve('要返回的数据可以任何数据例如接口返回数据');
			}, 2000);
		});
        return p
	}

promiseClick().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
});

输出：点击方法被调用
执行完成Promise
要返回的数据可以任何数据例如接口返回数据

优势

比传递callback回调要简单灵活，可嵌套，层层回调

三种状态

等待（pending）、已完成（fulfilled）、已拒绝（rejected）

then()

可以接受resolve（）和reject（）的回调，两种只能接收一个，根据Promise状态而定

function promiseClick(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //生成1-10的随机数
				console.log('随机数生成的值：',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('数字太于10了即将执行失败回调');
				}
			}, 2000);
		   })
		   return p
	   }
 
	promiseClick().then(
		function(data){
			console.log('resolved成功回调');
			console.log('成功回调接受的值：',data);
		}, 
		function(reason){
			console.log('rejected失败回调');
			console.log('失败执行回调抛出失败原因：',reason);
		}
	);

resolve()

写在new Promise 的回调函数中，最后返回这个Promise可以通过resolve（）then到下一层

reject()

写在new Promise 的回调函数中，最后返回这个Promise可以通过resolve（）then到下一层

catch()

抛出异常或rejected时被调用，可同时接收reason和data两个参数

.catch(function(reason, data){
		console.log('catch到rejected失败回调');
		console.log('catch失败执行回调抛出失败原因：',reason);
	}

all()

仅当三个都fulfilled时返回一个数组

.all([promiseClick3(), promiseClick2(), promiseClick1()])
		.then(function(results){
			console.log(results);
		}
    ```

## race()

谁先执行完就先执行谁的回调