阅读数:60 评论数:0

一、async

将不是Promise对象的返回值封装，如果有返回值返回为resolved的Promise，如果没有返回值，则返回rejected的Promise。

1、异步函数的返回值

（1）如果是普通值或对象，返回值被包裹在Promise.resove中

{
	console.log("--------3.1 返回一个普通的值或者对象----------");
	async function foo() {
		console.log("foo function start~");
		console.log("内部代码执行");
		console.log("foo function end~");
		return "okok";
	}
	const promiseResult = foo();
	promiseResult.then(res => console.log("result:" + res)); //result:okok 
}

// 如果不写返回值
{
	console.log("--------3.1 不写返回值----------");
	async function foo() {
		console.log("foo function start~");
		console.log("内部代码执行");
		console.log("foo function end~");
	}
	const promiseResult = foo();
	promiseResult.then(res => console.log("result:" + res)); //result:undefined 
}

（2）返回值是Promise，则状态由Promise内部的是resolve还是reject来决定

{
	console.log("-------- 3.2 返回一个Promise----------");
	async function foo() {
		console.log("foo function start~");
		console.log("内部代码执行");
		console.log("foo function end~");
		return new Promise((resolve, reject) => {
			reject("error了");
		});
	}
	const promiseResult = foo();
	promiseResult.catch(err => console.log("result:" + err)); //result:error了 
}

2、异步函数中抛出异常

如果我们在异步函数中抛出异常，它会作为Promise的reject来传递

{
    console.log("------4. 异步函数中抛出异常--------");
	async function foo() {
		console.log("foo function start~");
		console.log("中间代码~");
		// 异步函数中的异常, 会被作为异步函数返回的Promise的reject值的
		throw new Error("error message");
		console.log("foo function end~");
	}
	// 异步函数的返回值一定是一个Promise
	foo().catch(err => console.log("result", err));
	console.log("后续业务~~~~~");
 
	// 运行结果：【foo function end~】没有输出，但是【后续业务~~~~~】输出了
	/*     
      foo function start~
      中间代码~
      后续业务~~~~~
      result Error: error message */
}

二、await

阻塞等待一个返回值，利用await结合Promise对象，可以将异步的操作转换为同步操作。

		function getB() {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(2)
				}, 2000)
			})
		}

		function getC() {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(3)
				}, 3000)
			})
		}
		async function steps() {
			const a = 1;
			const b = await getB();
			const c = await getC();
			console.log('a :>> ', a);
			console.log('b :>> ', b);
			console.log('c :>> ', c);
		}

三、async和await结合使用

使用async结合await来解决实际应用中嵌套then链的问题，见下例：

	function takeLongTime(n) {
			return new Promise(resolve => {
				setTimeout(() => resolve(n + 200), n);
			});
		}

		function step1(n) {
			console.log(`step1 with ${n}`);
			return takeLongTime(n);
		}

		function step2(n) {
			console.log(`step2 with ${n}`);
			return takeLongTime(n);
		}

		function step3(n) {
			console.log(`step3 with ${n}`);
			return takeLongTime(n);
		}


		function work() {
			console.time('work')
			const time1 = 300;
			step1(time1)
				.then(time2 => {
					return step2(time2)
				})
				.then(time3 => {
					return step3(time3)
				})
				.then(result => {
					console.log(`你最终挣了${result}`);
					console.timeEnd("work");
				})
		}
		work()

使用await可以更加优雅的处理这个过程

	function takeLongTime(n) {
			return new Promise(resolve => {
				setTimeout(() => resolve(n + 200), n);
			});
		}
		function step1(n) {
			console.log(`step1 with ${n}`);
			return takeLongTime(n);
		}
		function step2(n) {
			console.log(`step2 with ${n}`);
			return takeLongTime(n);
		}
		function step3(n) {
			console.log(`step3 with ${n}`);
			return takeLongTime(n);
		}
		async function work() {
			console.time('work')
			const time1 = await step1(300)
			const time2 = await step2(time1)
			const time3 = await step3(time2)
			console.log(`你最终挣了${time3}`);
			console.timeEnd("work");
		}
		work()