英文:
Ajax Call Breaks When executed inside a function and throws a warning
问题
以下是您要翻译的 JavaScript 代码的翻译部分：
我试图DRY化一个JavaScript文件，该文件进行了多个ajax调用。我有一个函数，用于发出ajax调用，返回包含其他ajax调用所需的详细信息的对象。
这个工作得很好。为了使代码更加干燥，我使用了makeCall函数进行了awaited的ajax调用。问题是第二次对retrieveCountry.php的makeCall不会执行，因为gejson特征从未添加到地图上。我还收到了一个警告：“await”对此表达式的类型没有影响。ts(80007)
请问可能出了什么问题？值得注意的是，整个代码都在一个async函数内部，detail对象的范围仅限于此async函数内部。
希望这有助于解决您的问题。如果您需要更多帮助，请随时告诉我。
英文:
I am trying to DRY a JavaScript file that makes several ajax calls. I have a function that makes a ajax call, returns an object containing details needed for other ajax calls.
const makeCall = (url, type, data, done) => {
$.ajax({
url: url,
type: type,
dataType: "json",
data: data,
})
.done(done)
.fail(function(error) {
console.log(error);
});
};
const country = await $.ajax({
url: "libs/php/opencage.php",
type: "GET",
dataType: "json",
data: {
LAT: x.coords.latitude,
LNG: x.coords.longitude,
},
})
.done(function(result) {
if (result.status.name == "ok") {
//populate the detail object with responses from opencage needed to communicate with other apis
detail.lat = x.coords.latitude;
detail.long = x.coords.longitude;
detail.continent = result.data.results[0].components.continent;
detail.countryName = result.data.results[0].components.country;
detail.countryCode = result.data.results[0].components.country_code;
let code = result.data.results[0].components.country_code;
//set the select to user country
console.log(code);
$("#countrySelect").val(code.toUpperCase());
}
})
.fail(function(error) {
// your error code
console.log(error);
});
//save needed part of detail object for easy access
let latitude = detail.lat;
let longitude = detail.long;
let countryName = noSpace(detail.countryName);
let countryCode = detail.countryCode;
let continent = detail.continent;
//makecall to retrieve geojson feature details for selected country.
makeCall(
"libs/php/retrieveCountry.php",
"GET", {
code: countryCode.toUpperCase()
},
function(r) {
//add the geojson object to the map
L.geoJSON(r).addTo(map);
}
);
This works well. To DRY the code, I made the awaited ajax call with the makeCall function. what happens is that the second makeCall to retrieveCountry.php doesnt execute as the gejson feature is never added to the map. I also get a warning: 'await' has no effect on the type of this expression.ts(80007)
const country = await makeCall(
"libs/php/opencage.php",
"GET", {
LAT: x.coords.latitude,
LNG: x.coords.longitude,
},
function(result) {
if (result.status.name == "ok") {
//populate the detail object with responses from opencage needed to communicate with other apis
detail.lat = x.coords.latitude;
detail.long = x.coords.longitude;
detail.continent = result.data.results[0].components.continent;
detail.countryName = result.data.results[0].components.country;
detail.countryCode = result.data.results[0].components.country_code;
let code = result.data.results[0].components.country_code;
//set the select to user country
console.log(code);
$("#countrySelect").val(code.toUpperCase());
return detail;
}
}
);
//save needed part of detail object for easy access
let latitude = detail.lat;
let longitude = detail.long;
let countryName = noSpace(detail.countryName);
let countryCode = detail.countryCode;
let continent = detail.continent;
//makecall to retrieve geojson feature details for selected country. This part is never implemented as this feature is not added to the map.
makeCall(
"libs/php/retrieveCountry.php",
"GET", {
code: countryCode.toUpperCase()
},
function(r) {
//add the geojson object to the map
L.geoJSON(r).addTo(map);
}
);
Please what could be wrong? Also worth adding is that the entire code is inside an async function and the detail object is locally scoped to this async function
答案1
得分: 0
没有等待AJAX操作，警告是为什么的线索。具体来说，它告诉您在这里await无效：
await makeCall(...)
这是因为makeCall不可等待。它不是async函数，也不返回任何内容：
const makeCall = (url, type, data, done) => {
$.ajax(...);
};
由于$.ajax()操作是可等待的，看起来您的意图是返回它：
const makeCall = (url, type, data, done) => {
return $.ajax(...);
};
这将返回$.ajax()本身的可等待（"then-able"）结果，消费代码可以使用await（或跟随.then()）来处理它。
英文:
Nothing is awaiting the AJAX operation, and the warning is the clue as to why. Specifically it's telling you that await does nothing here:
await makeCall(...)
This is because makeCall is not awaitable. It's not async and it doesn't return anything:
const makeCall = (url, type, data, done) => {
$.ajax(...);
};
Since the $.ajax() operation is awaitable, it appears that your intent was to return that:
const makeCall = (url, type, data, done) => {
return $.ajax(...);
};
This will return the awaitable ("then-able") result from $.ajax() itself, which consuming code could then await (or follow with .then()).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论