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

Question

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

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

实际上，我总是使用回调函数，如下所示:

    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 的调用失败等)。

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

谢谢。

Answer 1

$.get 已经返回一个类似 Promise 的对象。您只需要摆脱回调并返回 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);