async js 返回值_聊一聊JavaScript 的 async/await

前言：

---

这两天在基于G6开发流程图的过程中，遇到这样一个问题——如何实现多个流程图共同打开又互不干扰的效果。采用的是element-UI的tabs组件，在每个tab页进行流程图的动态渲染。

需求很常规，但在实际开发的过程中，由于数据的复杂，涉及了很多js异步调用的操作，折腾了一阵，重新学习了一下Js的async/await,在这里分享给大家。

async与await：

---

• async

async关键字声明异步函数，返回值是promise对象，如果async关键字函数返回的不是promise，会自动用Promise.resolve()包装。

• await 

await操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。

await表达式会暂停当前async function的执行，等待Promise处理完成。若Promise正常处理(fulfilled)，其回调的resolve函数参数作为await表达式的值，继续执行async function。若Promise处理异常(rejected)，await表达式会把Promise的异常原因抛出。另外，如果await操作符后的表达式的值不是一个Promise，则返回该值本身。

• 优缺点

基于直接使用Promise来说，优势在于处理then链，特别是处理由多个Promise组成的then链，能够更清晰准确的写出代码(强推参考里的第一篇文章！)

缺点在于滥用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码会失去并发性。

参考：边城: 理解JavaScript的async/await https://segmentfault.com/a/1190000007535316sweetBoy_9126: async和await https://www.jianshu.com/p/b4fd76c61dc9peakol: async 和 await https://www.jianshu.com/p/5cb177d0cb7b

实际应用：

---

简单介绍一下我的开发背景：

• 新增tab页的过程中，由于每个画布的canvas是动态生成的，涉及了new

G6.Graph这样一个初始化的操作以及数据的回显；分解一下，这其中其实包含了三个独立的步骤——1.新增tab页；2.初始化画布；3.数据回显。利用async/await异步调用对其进行实现。

• 核心代码如下：

async addNewWindow() {
      //新增tab页的方法    let activeWindow = ++this.tabIndex + '';    this.windows.push({
              title: '实验 '+activeWindow,        name: activeWindow,    });    this.activeWindow = activeWindow;    await this.initWindow();//异步调用初始化画布的方法},initWindow() {
          return new Promise(resolve =>    {
              setTimeout(            () => {
                      this.containerName = "graph-container" + this.activeWindow;//每一次新加的窗口都应该是独一无二的                this.minMapName= "minimap" + this.activeWindow;                this.graph = this.graphs[parseInt(this.activeWindow)];                if (!this.graph ) {
                          this.init();//初始化画布的方法                }                resolve();            },           0        );    });},async openNewExperiment(val){
        await this.addNewWindow();//先打开新的页面  this.showGraphData(val);//再进行绘画},

总结：

---

前端小白，欢迎大家的指导交流???