作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经知道这个问题已经被问过很多次了,但我不知道如何组织我的代码。我是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 术语?我怎样才能把这段代码变成更容易理解的方式?
谢谢。
最佳答案
$.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);
关于javascript - 递归函数JS中级联多个异步调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61407021/
我是一名优秀的程序员,十分优秀!