面試題：如何給所有的async函數新增try/catch？

// 範例
async function fn() {
  let value = await new Promise((resolve, reject) => {
    reject('failure');
  });
  console.log('do something...');
}
fn()

async function fn() {
  await new Promise((resolve, reject) => reject('報錯'));
  await new Promise((resolve) => resolve(1));
  console.log('do something...');
}
fn();

async function fn() {
  try {
    await new Promise((resolve, reject) => reject('報錯'));
    await new Promise(resolve => resolve(1));
    console.log('do something...');
  } catch (e) {
    console.log("\nfilePath: E:\\myapp\\src\\main.js\nfuncName: fn\nError:", e);
  }
}
fn();

function demo(n) {
  return n * n;
}

{
  "type": "Program", // 整段程式碼的主體
  "body": [
    {
      "type": "FunctionDeclaration", // function 的型別叫函數宣告；
      "id": { // id 為函數宣告的 id
        "type": "Identifier", // 識別符號 型別
        "name": "demo" // 識別符號 具有名字 
      },
      "expression": false,
      "generator": false,
      "async": false, // 代表是否 是 async function
      "params": [ // 同級 函數的引數 
        {
          "type": "Identifier",// 引數型別也是 Identifier
          "name": "n"
        }
      ],
      "body": { // 函數體內容 整個格式呈現一種樹的格式
        "type": "BlockStatement", // 整個函數體內容 為一個塊狀程式碼塊型別
        "body": [
          {
            "type": "ReturnStatement", // return 型別
            "argument": {
              "type": "BinaryExpression",// BinaryExpression 二進位制表示式型別
              "start": 30,
              "end": 35,
              "left": { // 分左 右 中 結構
                "type": "Identifier", 
                "name": "n"
              },
              "operator": "*", // 屬於操作符
              "right": {
                "type": "Identifier",
                "name": "n"
              }
            }
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

async function fn() {
   await f()
}

async function fn() {
    try {
        await f()
    } catch (e) {
        console.log(e)
    }
}

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       // 設定需要範圍的節點型別
       CallExression: (path, state) => { 
         do soming ……
       }
     }
   }
 }

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       // 設定AwaitExpression
       AwaitExpression(path) {
         // 獲取當前的await節點
         let node = path.node;
       }
     }
   }
 }

// async節點的屬性為true
const asyncPath = path.findParent(p => p.node.async)

// 1️⃣：函數宣告
async function fn() {
  await f()
}

// 2️⃣：函數表示式
const fn = async function () {
  await f()
};

// 3️⃣：箭頭函數
const fn = async () => {
  await f()
};

// 4️⃣：async函數定義在物件中
const obj = {
  async fn() {
      await f()
  }
}

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       // 設定AwaitExpression
       AwaitExpression(path) {
         // 獲取當前的await節點
         let node = path.node;
         // 查詢async函數的節點
         const asyncPath = path.findParent((p) => p.node.async && (p.isFunctionDeclaration() || p.isArrowFunctionExpression() || p.isFunctionExpression() || p.isObjectMethod()));
       }
     }
   }
 }

// 引入babel-template
const template = require('babel-template');

// 定義try/catch語句模板
let tryTemplate = `
try {
} catch (e) {
console.log(CatchError：e)
}`;

// 建立模板
const temp = template(tryTemplate);

// 給模版增加key，新增console.log列印資訊
let tempArgumentObj = {
   // 通過types.stringLiteral建立字串字面量
   CatchError: types.stringLiteral('Error')
};

// 通過temp建立try語句的AST節點
let tryNode = temp(tempArgumentObj);

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       AwaitExpression(path) {
         let node = path.node;
         const asyncPath = path.findParent((p) => p.node.async && (p.isFunctionDeclaration() || p.isArrowFunctionExpression() || p.isFunctionExpression() || p.isObjectMethod()));
         
         let tryNode = temp(tempArgumentObj);
         
         // 獲取父節點的函數體body
         let info = asyncPath.node.body;

         // 將函數體放到try語句的body中
         tryNode.block.body.push(...info.body);

         // 將父節點的body替換成新建立的try語句
         info.body = [tryNode];
       }
     }
   }
 }

// 範例程式碼，不再新增try/catch
async function fn() {
    try {
        await f()
    } catch (e) {
        console.log(e)
    }
}

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       AwaitExpression(path) {
       
        // 判斷父路徑中是否已存在try語句，若存在直接返回
        if (path.findParent((p) => p.isTryStatement())) {
          return false;
        }
       
         let node = path.node;
         const asyncPath = path.findParent((p) => p.node.async && (p.isFunctionDeclaration() || p.isArrowFunctionExpression() || p.isFunctionExpression() || p.isObjectMethod()));
         let tryNode = temp(tempArgumentObj);
         let info = asyncPath.node.body;
         tryNode.block.body.push(...info.body);
         info.body = [tryNode];
       }
     }
   }
 }

// 獲取編譯目標檔案的路徑，如：E:\myapp\src\App.vue
const filePath = this.filename || this.file.opts.filename || 'unknown';

// 定義方法名
let asyncName = '';

// 獲取async節點的type型別
let type = asyncPath.node.type;

switch (type) {
// 1️⃣函數表示式
// 情況1：普通函數，如const func = async function () {}
// 情況2：箭頭函數，如const func = async () => {}
case 'FunctionExpression':
case 'ArrowFunctionExpression':
  // 使用path.getSibling(index)來獲得同級的id路徑
  let identifier = asyncPath.getSibling('id');
  // 獲取func方法名
  asyncName = identifier && identifier.node ? identifier.node.name : '';
  break;

// 2️⃣函數宣告，如async function fn2() {}
case 'FunctionDeclaration':
  asyncName = (asyncPath.node.id && asyncPath.node.id.name) || '';
  break;

// 3️⃣async函數作為物件的方法，如vue專案中，在methods中定義的方法: methods: { async func() {} }
case 'ObjectMethod':
  asyncName = asyncPath.node.key.name || '';
  break;
}

// 若asyncName不存在，通過argument.callee獲取當前執行函數的name
let funcName = asyncName || (node.argument.callee && node.argument.callee.name) || '';

// babel-template 用於將字串形式的程式碼來構建AST樹節點
const template = require('babel-template');

const { tryTemplate, catchConsole, mergeOptions, matchesFile } = require('./util');

module.exports = function (babel) {
  // 通過babel 拿到 types 物件，操作 AST 節點，比如建立、校驗、轉變等
  let types = babel.types;

  // visitor：外掛核心物件，定義了外掛的工作流程，屬於存取者模式
  const visitor = {
    AwaitExpression(path) {
      // 通過this.opts 獲取使用者的設定
      if (this.opts && !typeof this.opts === 'object') {
        return console.error('[babel-plugin-await-add-trycatch]: options need to be an object.');
      }

      // 判斷父路徑中是否已存在try語句，若存在直接返回
      if (path.findParent((p) => p.isTryStatement())) {
        return false;
      }

      // 合併外掛的選項
      const options = mergeOptions(this.opts);

      // 獲取編譯目標檔案的路徑，如：E:\myapp\src\App.vue
      const filePath = this.filename || this.file.opts.filename || 'unknown';

      // 在排除列表的檔案不編譯
      if (matchesFile(options.exclude, filePath)) {
        return;
      }

      // 如果設定了include，只編譯include中的檔案
      if (options.include.length && !matchesFile(options.include, filePath)) {
        return;
      }

      // 獲取當前的await節點
      let node = path.node;

      // 在父路徑節點中查詢宣告 async 函數的節點
      // async 函數分為4種情況：函數宣告 || 箭頭函數 || 函數表示式 || 物件的方法
      const asyncPath = path.findParent((p) => p.node.async && (p.isFunctionDeclaration() || p.isArrowFunctionExpression() || p.isFunctionExpression() || p.isObjectMethod()));

      // 獲取async的方法名
      let asyncName = '';

      let type = asyncPath.node.type;

      switch (type) {
        // 1️⃣函數表示式
        // 情況1：普通函數，如const func = async function () {}
        // 情況2：箭頭函數，如const func = async () => {}
        case 'FunctionExpression':
        case 'ArrowFunctionExpression':
          // 使用path.getSibling(index)來獲得同級的id路徑
          let identifier = asyncPath.getSibling('id');
          // 獲取func方法名
          asyncName = identifier && identifier.node ? identifier.node.name : '';
          break;

        // 2️⃣函數宣告，如async function fn2() {}
        case 'FunctionDeclaration':
          asyncName = (asyncPath.node.id && asyncPath.node.id.name) || '';
          break;

        // 3️⃣async函數作為物件的方法，如vue專案中，在methods中定義的方法: methods: { async func() {} }
        case 'ObjectMethod':
          asyncName = asyncPath.node.key.name || '';
          break;
      }

      // 若asyncName不存在，通過argument.callee獲取當前執行函數的name
      let funcName = asyncName || (node.argument.callee && node.argument.callee.name) || '';

      const temp = template(tryTemplate);

      // 給模版增加key，新增console.log列印資訊
      let tempArgumentObj = {
        // 通過types.stringLiteral建立字串字面量
        CatchError: types.stringLiteral(catchConsole(filePath, funcName, options.customLog))
      };

      // 通過temp建立try語句
      let tryNode = temp(tempArgumentObj);

      // 獲取async節點(父節點)的函數體
      let info = asyncPath.node.body;

      // 將父節點原來的函數體放到try語句中
      tryNode.block.body.push(...info.body);

      // 將父節點的內容替換成新建立的try語句
      info.body = [tryNode];
    }
  };
  return {
    name: 'babel-plugin-await-add-trycatch',
    visitor
  };
};

const merge = require('deepmerge');

// 定義try語句模板
let tryTemplate = `
try {
} catch (e) {
console.log(CatchError,e)
}`;

/*
 * catch要列印的資訊
 * @param {string} filePath - 當前執行檔案的路徑
 * @param {string} funcName - 當前執行方法的名稱
 * @param {string} customLog - 使用者自定義的列印資訊
 */
let catchConsole = (filePath, funcName, customLog) => `
filePath: ${filePath}
funcName: ${funcName}
${customLog}:`;

// 預設設定
const defaultOptions = {
  customLog: 'Error',
  exclude: ['node_modules'],
  include: []
};

// 判斷執行的file檔案 是否在 exclude/include 選項內
function matchesFile(list, filename) {
  return list.find((name) => name && filename.includes(name));
}

// 合併選項
function mergeOptions(options) {
  let { exclude, include } = options;
  if (exclude) options.exclude = toArray(exclude);
  if (include) options.include = toArray(include);
  // 使用merge進行合併
  return merge.all([defaultOptions, options]);
}

function toArray(value) {
  return Array.isArray(value) ? value : [value];
}

module.exports = {
  tryTemplate,
  catchConsole,
  defaultOptions,
  mergeOptions,
  matchesFile,
  toArray
};