Vue学习笔记(十二)

async与await

1. async

async作为一个关键字放到声明函数前面，表示该函数为一个异步任务，不会阻塞后面函数的执行
async函数里如果有异步过程会等待，但async函数本身会马上返回，不会阻塞当前线程。可以简单认为async函数工作在主线程，同步执行，不会阻塞界面渲染；async函数内部由await修饰的异步过程，工作在相应的协程上，会阻塞等待异步任务的完成再返回
async函数返回类型为Promise对象
async函数会返回一个promise，并且Promise对象的状态值是resolved（成功的）
如果没有在async函数中写return，那么Promise对象resolve的值就是是undefined
如果写了return，那么return的值就会作为成功的时候传入的值

这是和普通函数本质上不同的地方，也是使用时重点注意的地方：
1. return new Promise()，这个符合async函数本意
2. return data 这是同步函数的写法，特别注意这其实就相当于Promise.resolve(data);还是一个Promise对象，但在调用async函数的地方通过简单的等号操作（=）是拿不到这个data的，因为返回值是一个Promise对象，所以需要用then(data => { })才可以拿到data
3. 如果没有返回值，相当于返回了Promise.resolve(undefined);

        <script>const aa = async () => {return 1//return Promise.resolve(1)// return new Promise((resolve, reject) => {// resolve(1)// })}const bb = async () => {return Promise.resolve(1)// return new Promise((resolve, reject) => {// resolve(1)// })}//aa() 返回结果是 Promise对象console.log(`output->aa()`,aa())//获取异步函数的返回值aa().then(res => {console.log(`output->res`,res)})</script>

无等待
在没有await的情况下执行async函数，它会立即执行，返回一个Promise对象，并且不会阻塞后面的语句，这和普通返回Promise对象的函数并无二致

2. await

await只能在async函数内部使用：不能放在普通函数里面，否则会报错
await关键字后面跟Promise对象：在Pending状态时，相应的协程会交出控制权，进入等待状态，这是协程的本质
await是async wait的意思： wait的是resolve(data)的消息，并把数据data返回，比如下面代码中，当Promise对象由Pending变为Resolved的时候，变量a就等于data，然后再顺序执行下面的语句console.log(a)，这真的是等待，真的是顺序执行，表现和同步代码几乎一模一样

const a = await new Promise((resolve, reject) => {
// async process ...
return resolve(data);
});
console.log(a);

await后面也可以跟同步代码：不过系统会自动将其转化成一个Promsie对象

const a = await 'hello world'
// 相当于
const a = await Promise.resolve('hello world');
// 跟同步代码是一样的，还不如省事点，直接去掉await关键字
const a = 'hello world';

await对于失败消息的处理： await只关心异步过程成功的消息resolve(data)，拿到相应的数据data，至于失败消息reject(error)，不关心不处理；对于错误的处理有以下几种方法供选择：
1. 让await后面的Promise对象自己catch
2. 也可以让外面的async函数返回的Promise对象统一catch
3. 像同步代码一样，放在一个try…catch结构中

async function fetchData() {// 将异步和同步的代码放在一个try..catch中，异常都能抓到try {const array = null;let data = await asyncFn(); // 这里用await关键字，就能拿到结果值；否则，没有await的话，只能拿到Promise对象if (array.length > 0) { // 这里会抛出异常，下面的catch也能抓到array.push(data);}} catch (error) {console.log(error);}}document.addEventListener('DOMContentLoaded', fetchData);

await对于结果的处理： await是个运算符，用于组成表达式，await表达式的运算结果取决于它等的东西，如果它等到的不是一个Promise对象，那么await表达式的运算结果就是它等到的东西；如果它等到的是一个Promise对象，await就忙起来了，它会阻塞其后面的代码，等着Promise对象resolve，然后得到resolve的值，作为await表达式的运算结果；虽然是阻塞，但async函数调用并不会造成阻塞，它内部所有的阻塞都被封装在一个Promise对象中异步执行，这也正是await必须用在async函数中的原因

3. 综合案例

<script>// 模拟一个异步操作函数const myPromise1 = () => {return new Promise((resolve, reject) => {console.log(`output->创建myPromise1`)// 模拟一个异步操作，2秒钟后将结果返回setTimeout(() => {const random = Math.random()if (random > 0.5) {resolve(`myPromise1成功`);} else {reject(`myPromise1失败`)}}, 2000)})}// 模拟一个异步操作函数const myPromise2 = () => {return new Promise((resolve, reject) => {console.log(`output->创建myPromise2`)// 模拟一个异步操作，2秒钟后将结果返回setTimeout(() => {const random = Math.random()if (random > 0.5) {resolve(`myPromise2成功`);} else {reject(`myPromise2失败`)}}, 2000)})}// 模拟一个异步操作函数const myPromise3 = () => {return new Promise((resolve, reject) => {console.log(`output->创建myPromise3`)// 模拟一个异步操作，2秒钟后将结果返回setTimeout(() => {const random = Math.random()if (random > 0.5) {resolve(`myPromise3成功`);} else {reject(`myPromise3失败`)}}, 2000)})}const myAsync = async () => {try {console.log(`myAsync开始执行`)//await 同步执行代码获取Promise的resolve结果const data1 = await myPromise1()const data2 = await myPromise2()const data3 = await myPromise3()return `myAsync执行成功`} catch (error) {//await 执行出现错误处理（包括Promise的reject结果）console.log(`myAsync执行出错:`, error)}}//myAsync函数是async异步的 返回结果是Promise对象myAsync().then((res) => {console.log(`output->res`, res)}).catch((error) => {console.log(`output->error`, error)})
</script>