递归函数JS中级联的多个异步调用

Question

我已经知道这个问题已经被问过很多次了，但我不知道如何组织我的代码。我来自C/C++语言，还有思维方式，而我用JS写的东西看起来“毫无意义”。

我正在使用递归函数来生成地图上的旅行。问题是我需要对 2 个不同的 API 进行 2 次异步调用，第二次取决于第一个的结果。

其实我一直在使用回调函数，像这样：

    function asyncFunction(param, callbackF) {
      // ... //
      $.get(url, function(data, status) {
        callbackF(data, status);
      })
    }

    function asyncFunction2(param, callbackF) {
        // ... //
        $.get(url2, function(data, status) {
          callbackF(data, status);
        })
    }

    function recursiveFunction(param1, param2, num, tab, distance) {
      //.. stuff with parameters //
      asynFunction(param1, function(result, status) {
        // .. stuff with parameters .. //

        //.. Algo stops when distance is 0 ..//
        if(!distance) {
          asyncFunction2(param, function(data, status) {
            // Final stuff //

            return; // End
          });
        }
        else recursiveFunction(param1, param2, num, tab, distance); // parameters has been updated
      });
    }

recursiveFunction(param1, param2, num, tab, distance);

它工作正常，但有很多重叠，我不知道这个函数是否出错（例如，对 API 的调用失败等）。

问题是如何在这种情况下引入 Promises 或在 JS 中引入 async/await 术语？ 我怎样才能把这段代码变成更容易理解的方式？

谢谢。

Answer 1

$.get 已经返回了一个类似 Promise 的对象。你只需要摆脱回调并返回承诺。

function asyncFunction(param) {
  // ... //
  return $.get(url)
}

function asyncFunction2(param) {
    // ... //
    return $.get(url2)
}

现在您可以在您的函数中使用async/await。像这样的东西应该可以工作

async function recursiveFunction(param1, param2, num, tab, distance) {
  const result = await asyncFunction(param1);
  // .. stuff with parameters .. //

  if(distance) {
    await recursiveFunction(param1, param2, num, tab, distance); // parameters has been updated
  } else {
    await asyncFunction2(param)
  }
}


recursiveFunction(param1, param2, num, tab, distance);