Vue.js 学习笔记十四：Promise 之 async/await

目录

async/await

---

async/await

Promise 实际上是利用编程技巧将回调函数改成链式调用，避免回调地狱。最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。

为了解决 Promise 的问题，async、await 在 ES7 中被提了出来，是目前为止最好的解决方案。

async/await 基础语法

			// 定义一个异步函数（假设他是一个异步函数）
			function queryData() {
				const data = { code: 200, msg:'hello world' }
				return data			
			}
			// 在需要使用上面异步函数的函数前面，加上async声明，声明这是一个异步函数
			async function testQueryData() {
                 // 在异步函数前面加上 await，函数执行就会等待用await声明的异步函数执行完毕之后，在往下执行
				const data = await queryData()
				return data
			}
			 // 返回一个 Promise 对象
			const result = testQueryData();
			console.log(result)
			

运行后可以看出，async 函数会返回一个Promise对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。应该使用原始的方式 then() 链来处理这个Promise对象：

			result.then(res => {
				console.log(res)
			})

使用 async/await 的时候，是无法捕获错误的，这个时候就要用到我们 es5 里面的 try/catch，来进行错误的捕获：

			async function testQueryData() {
				try {
					const data = await queryData()
					return data
				} catch(err) {
					console.error(err)
				}				
			}

async 函数在声明形式上和普通函数没有区别，函数声明式，函数表达式，对象方法，class 方法和箭头函数等都可以声明 async 函数。

任何一个 await 语句后面的 Promise 对象变为 reject 状态，那么整个 async 函数都会中断执行。

async 函数返回的 Promise 对象，必须等到内部所有 await 命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到 return 语句或者抛出错误。也就是说，只有 async 函数内部的异步操作执行完，才会执行 then 方法指定的回调函数。