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

Question

我已经知道这个问题已经被问过很多次了，但我不知道如何组织我的代码。我来自 C/C++ 语言，但仍然有思维方式，我用 JS 编写的内容看起来 'meaningless'.

我正在使用递归函数在地图上生成旅行。问题是我需要对 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 已经 return 是一个类似 Promise 的对象。您只需要摆脱回调和 return 承诺。

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);

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

Multiple asynchronous call in cascade in recursive function JS

javascript

recursion

asynchronous

asynchronous-javascript