Ожидание асинхронного запроса GET в Javascript
Я хочу сделать запрос GET к API и получить от него данные. Насколько я знаю, мой $.getJSON асинхронный, то есть он не будет ждать, пока он завершится, прежде чем продолжить мой код. Прямо сейчас я думаю, что лучший способ, который я могу определить из исследований, — это использовать обратный вызов, но я все еще не понимаю, как лучше всего это реализовать (если даже лучше). Можете ли вы использовать этот пример кода ниже для демонстрации?
function getData(URL) {
$.getJSON(URL, function(data) {
//play with data, such as save to localStorage on web broswer
}
}
function container() {
var URL = "https://someurl....";
getData(URL);
// Now access the data from localStorage, which was saved during .getJSON function, will fail if getData is ran async due to delay
// Open URL here appending data from the GET request, have to obviously have it prior to proceeding
}
Я знаю, что это довольно широко обсуждается, и уверяю вас, что не публиковал это до исследования, но мне все еще тяжело. Если бы кто-то мог продемонстрировать этот пример, это могло бы действительно помочь мне понять. Спасибо!
Вместо обеспечение вы могли бы использовать продемонстрировать; что вы прочитали, что узнали и что именно вы еще не понимаете? Как вы говорите, это довольно широко обсуждается, поэтому трудно понять, как еще одна попытка объяснить будет успешной, если вы не сможете быть предельно конкретными.
Хотя связанный вопрос действительно предоставляет полезную информацию, для этого потребуется не только преобразовать все операторы .getJSON в нотацию и формат .ajax, но также потребуется перенести весь последующий код, который должен выполняться после запроса asnyc, в новую функцию, которая затем следует передать в исходную функцию в качестве обратного вызова ... это много рефакторинга, и я надеялся, что будет что-то более читаемое/красноречивое. Кроме того, с запросом ajax это сделает так, чтобы обратный вызов выполнялся в случае успеха, но что, если я хочу, чтобы ВЕСЬ код ждал, пока запрос не будет завершен?
1. Нет, вы можете использовать ту же логику с $.getJSON или любая другая асинхронная функция/метод. В этом суть канонических дубликатов. 2. Вам нужно будет извлечь функцию для использования с обратными вызовами, будь то напрямую или с промисами/наблюдаемыми объектами, или вы можете использовать синтаксис async/await, который также описан в дубликате.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать getData функцию обратного вызова:
function getData(URL, cb) {
$.getJSON(URL, function(data) {
//play with data, such as save to localStorage on web broswer
cb(data);
}
}
function container() {
var URL = "https://someurl....";
getData(URL, function(data) {
// Now access the data from localStorage
});
}
Или верните обещание, которое затем позволит вам использовать async/await.
function getData(URL) {
return new Promise(function(resolve, reject) {
$.getJSON(URL, function(data) {
//play with data, such as save to localStorage on web broswer
resolve(data);
}
});
}
async function container() {
var URL = "https://someurl....";
var data = await getData(URL);
// Now access the data from localStorage
}
Так как $.getJSON уже возвращает обещание, это еще лучше:
function getData(URL) {
return $.getJSON(URL).then(function(data) {
//play with data, such as save to localStorage on web broswer
return data;
});
}
// container function stays the same as above
Или:
async function getData(URL) {
var data = await $.getJSON(URL);
//play with data, such as save to localStorage on web broswer
return data;
}
// container function stays the same as above
return new Promise является избыточным. getJSON уже возвращает пригодный для использования объект.
Похоже, ответ уже есть в вопросе. Как бы то ни было, сделайте всю «игру» в функции обратного вызова.