async/await笔记

async/await 是一种建立在Promise之上的编写异步或非阻塞代码的新方法，被普遍认为是JS异步操作的最终且最优雅的解决方案。

async是异步的意思，而await是async wait的简写，即异步等待。

async的用法之一：延迟加载;

       js的加载，解析和执行会阻塞页面的渲染过程，因此我们希望js脚本能够尽可能地延迟加载以此来提高页面的渲染速度

       我们可以给js脚本添加async属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行js脚本；这个时候如果文档没有解析完成的话同样会阻塞。多个async属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。

       浏览器遇到async脚本时不会阻塞页面渲染，而是直接下载然后运行。但这样的问题是，不同脚本运行次序就无法控制，只是脚本不会阻止剩余页面的显示

       async属性只适用于外部脚本文件

例：

//脚本1
<script async ="src/common/request.js"><script>

async函数返回一个 Promise 对象

       可以使用then方法添加回调函数，当async函数内部return语句返回的值，会成为then方法回调函数的参数。

       async 函数内部抛出的错误，会导致返回的 Promise 对象变为 reject 状态。抛出的错误对象会被 catch 方法或then方法的第二个回调函数接受到。

async function main(){
}
console.log(main());

 

await 命令

await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。

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

但是，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。

另一种方法是await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。

if (data.length > 0) {
        result = await uploadFile(url, extendParams, data, fileGroupId);
    }
    if (uniappFile.length > 0) {
        result = await uploadFileByUniapp(url, extendParams, uniappFile[0], result ? result.data.fileGroupId : false);
        for (let i = 1; i < uniappFile.length; i++) {
            result = await uploadFileByUniapp(url, extendParams, uniappFile[i], result.data.fileGroup.fileGroupId);
        }
    }