ES6 Promise的基本认识

promise中一般是处理一些异步事件，包括resolve和reject两个参数

resolve表示执行成功的回执，reject表示执行失败的回执

promise的默认状态为Padding，reolve则是将promise的状态变为Fullfilled, reject是将状态变为Rejected

示例：

getNumber() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			let num = Math.floor(Math.random() * 10);
			if (num < 5) resolve({ result: 'lt', num })
			else reject({ result: 'gt', num });
		}, 2000);
	})
}

this.getNumber().then((data) => {
	console.log(`${data.num}低于中间值`);
}, (data) =>{
	console.log(`${data.num}高于中间值`);
})

链式操作

async_1() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log(`异步任务1执行完成`);
			resolve(1);
		}, 1000);
	})
},
async_2() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log(`异步任务2执行完成`);
			resolve(2);
		}, 2000);
	})
},
async_3() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log(`异步任务3执行完成`);
			resolve(3);
		}, 3000);
	})
}

this.async_1().then((data) => {
	console.log(data);
	return this.async_2();
}).then((data) => {
	console.log(data);
	return this.async_3();
}).then((data) => {
	console.log(data);
})

运行结果：

异步任务1执行完成
1
异步任务2执行完成
2
异步任务3执行完成
3

Promise一般外面会包一层函数，Promise提供一些方法：

1. then

then中接收两个参数，一个是状态为Fullfilled的回执，一个是状态为Rejected的回执

2. catch

可用来捕获异常，使程序正常往下执行

runAsync() {
	const p = new Promise(function(resolve, reject) {
		setTimeout(() => {
			console.log('timeout');
			resolve({ result: 'success' });
		}, 1000);
	});
	return p;
}

this.runAsync().then((data) => {
	console.log('data', data);
	console.log(result);    // 未定义的变量，会抛出异常
}).catch((reason) => {
	console.log('reject', reason);    // 捕获异常
});

运行结果：

reject ReferenceError: result is not defined
    at eval (PageCompt.vue?f6cd:63)

3. all

接收一组Promise,并行执行，在一个回调中处理所有返回的数据

实例：

Promise.all([this.async_1(), this.async_2(), this.async_3()]).then((data) => {
	console.log(data);
})

运行结果：

异步任务1执行完成
异步任务2执行完成
异步任务3执行完成
[1, 2, 3]

注： 只有当所有的Promise都执行成功时才会执行第一个回调，若其中有Rejected状态的Promise则会在第二个回调中被处理

修改第二个异步方法：

async_2() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log(`异步任务2执行完成`);
			reject(2);
		}, 2000);
	})
}

Promise.all([this.async_1(), this.async_2(), this.async_3()]).then((data) => {
	console.log(data);
}, (reason) => {
	console.log('reason', reason);
})

运行结果：

异步任务1执行完成
异步任务2执行完成
reason 2
异步任务3执行完成

4. race

同样是并行，但是只处理最先完成的数据

 

参考：https://www.cnblogs.com/whybxy/p/7645578.html