Mam funkcję, fooktóra powoduje żądanie Ajax. Jak mogę zwrócić odpowiedź foo?

Próbowałem successzwrócić wartość z wywołania zwrotnego, a także przypisać odpowiedź do zmiennej lokalnej wewnątrz funkcji i zwrócić tę, ale żaden z tych sposobów nie zwrócił odpowiedzi.

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            result = response;
            // return response; // <- I tried that one as well
        }
    });

    return result;
}

var result = foo(); // It always ends up being `undefined`.

→ Aby uzyskać bardziej ogólne wyjaśnienie zachowania asynchronicznego z różnymi przykładami, zobacz Dlaczego moja zmienna pozostaje niezmieniona po zmodyfikowaniu jej w funkcji? - Odwołanie do kodu asynchronicznego

→ Jeśli już rozumiesz problem, przejdź do możliwych rozwiązań poniżej.

Problem

W Ajax oznacza asynchroniczny . Oznacza to, że wysłanie żądania (a raczej otrzymanie odpowiedzi) jest usuwane z normalnego przepływu wykonania. W twoim przykładzie natychmiast zwraca, a następna instrukcja, jest wykonywana przed funkcją, którą przekazałeś jako wywołanie zwrotne.$.ajaxreturn result;success

Oto analogia, która, miejmy nadzieję, czyni różnicę między przepływem synchronicznym i asynchronicznym:

Synchroniczny

Wyobraź sobie, że dzwonisz do przyjaciela i prosisz go, aby coś dla ciebie poszukał. Chociaż może to chwilę potrwać, czekasz przez telefon i wpatrywasz się w kosmos, aż znajomy udzieli odpowiedzi, której potrzebujesz.

To samo dzieje się, gdy wykonujesz wywołanie funkcji zawierające „normalny” kod:

function findItem() {
    var item;
    while(item_not_found) {
        // search
    }
    return item;
}

var item = findItem();

// Do something with item
doSomethingElse();

Mimo że wykonanie findItemmoże potrwać długo, każdy następny kod var item = findItem();musi poczekać, aż funkcja zwróci wynik.

Asynchroniczny

Z tego samego powodu ponownie dzwonisz do swojego przyjaciela. Ale tym razem powiesz mu, że się spieszysz i powinien oddzwonić na twój telefon komórkowy. Rozłączasz się, wychodzisz z domu i robisz wszystko, co planujesz. Gdy znajomy oddzwoni, masz do czynienia z informacjami, które ci przekazał.

Dokładnie tak się dzieje, kiedy wykonujesz żądanie Ajax.

findItem(function(item) {
    // Do something with item
});
doSomethingElse();

Zamiast czekać na odpowiedź, wykonywanie jest kontynuowane natychmiast, a instrukcja jest wykonywana po wywołaniu Ajax. Aby ostatecznie uzyskać odpowiedź, udostępniasz funkcję, która ma być wywoływana po odebraniu odpowiedzi, oddzwanianie (zauważ coś? Oddzwonić ?). Wszelkie instrukcje przychodzące po tym wywołaniu są wykonywane przed wywołaniem wywołania zwrotnego.

Rozwiązania)

Uwzględnij asynchroniczną naturę JavaScript! Chociaż niektóre operacje asynchroniczne zapewniają synchroniczne odpowiedniki (podobnie jak „Ajax”), generalnie odradza się ich używanie, szczególnie w kontekście przeglądarki.

Dlaczego tak źle pytasz?

JavaScript działa w wątku interfejsu użytkownika przeglądarki, a każdy długotrwały proces zablokuje interfejs użytkownika, co spowoduje, że przestanie on odpowiadać. Dodatkowo istnieje górny limit czasu wykonywania dla JavaScript, a przeglądarka zapyta użytkownika, czy kontynuować wykonywanie, czy nie.

Wszystko to jest naprawdę złe doświadczenie użytkownika. Użytkownik nie będzie w stanie stwierdzić, czy wszystko działa dobrze, czy nie. Ponadto efekt będzie gorszy dla użytkowników z wolnym połączeniem.

Poniżej przyjrzymy się trzem różnym rozwiązaniom, które wszystkie budują jeden na drugim:

• async/awaitObiecuje z (ES2017 +, dostępny w starszych przeglądarkach, jeśli używasz transpilatora lub regeneratora)
• Callbacki (popularne w węźle)
• then()Obiecuje za pomocą (ES2015 +, dostępny w starszych przeglądarkach, jeśli korzystasz z jednej z wielu bibliotek obietnic)

Wszystkie trzy są dostępne w obecnych przeglądarkach, a węzeł 7+.

ES2017 +: Obiecuje z async/await

Wersja ECMAScript wydana w 2017 r. Wprowadziła obsługę funkcji asynchronicznych na poziomie składni . Za pomocą asynci awaitmożesz pisać asynchronicznie w „stylu synchronicznym”. Kod jest nadal asynchroniczny, ale łatwiej go odczytać / zrozumieć.

async/awaitopiera się na obietnicach: asyncfunkcja zawsze zwraca obietnicę. await„rozpakowuje” obietnicę i albo powoduje, że wartość przyrzeczenia została rozwiązana, albo zgłasza błąd, jeśli obietnica została odrzucona.

Ważne: Możesz używać tylko awaitwewnątrz asyncfunkcji. W tej chwili najwyższy poziom awaitnie jest jeszcze obsługiwany, więc może być konieczne utworzenie asynchronicznego IIFE ( Natychmiastowe wywołanie wyrażenia funkcji ), aby rozpocząć asynckontekst.

Możesz przeczytać więcej o MDN asynci awaitna jego temat.

Oto przykład, który opiera się na opóźnieniu powyżej:

// Using 'superagent' which will return a promise.
var superagent = require('superagent')

// This is isn't declared as `async` because it already returns a promise
function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}


async function getAllBooks() {
  try {
    // GET a list of book IDs of the current user
    var bookIDs = await superagent.get('/user/books');
    // wait for 3 seconds (just for the sake of this example)
    await delay();
    // GET information about each book
    return await superagent.get('/books/ids='+JSON.stringify(bookIDs));
  } catch(error) {
    // If any of the awaited promises was rejected, this catch block
    // would catch the rejection reason
    return null;
  }
}

// Start an IIFE to use `await` at the top level
(async function(){
  let books = await getAllBooks();
  console.log(books);
})();

Aktualne przeglądarek i węzłów wersje obsługują async/await. Możesz również obsługiwać starsze środowiska, przekształcając swój kod do ES5 za pomocą regeneratora (lub narzędzi korzystających z regeneratora, takich jak Babel ).

Niech funkcje akceptują oddzwanianie

Oddzwonienie to po prostu funkcja przekazana do innej funkcji. Ta inna funkcja może wywołać funkcję przekazaną, ilekroć jest gotowa. W kontekście procesu asynchronicznego wywołanie zwrotne będzie wywoływane za każdym razem, gdy proces asynchroniczny zostanie wykonany. Zwykle wynik jest przekazywany do wywołania zwrotnego.

W przykładzie pytania możesz foozaakceptować oddzwonienie i użyć go jako successoddzwonienia. Więc to

var result = foo();
// Code that depends on 'result'

staje się

foo(function(result) {
    // Code that depends on 'result'
});

Tutaj zdefiniowaliśmy funkcję „inline”, ale możesz przekazać dowolne odwołanie do funkcji:

function myCallback(result) {
    // Code that depends on 'result'
}

foo(myCallback);

foo sam jest zdefiniowany w następujący sposób:

function foo(callback) {
    $.ajax({
        // ...
        success: callback
    });
}

callbackbędzie odnosić się do funkcji, którą przekazujemy, fookiedy ją wywołujemy i po prostu ją przekazujemy success. To znaczy, gdy żądanie Ajax zakończy się powodzeniem, $.ajaxzadzwoni callbacki przekaże odpowiedź do wywołania zwrotnego (do którego można się odwołać result, ponieważ w ten sposób zdefiniowaliśmy wywołanie zwrotne).

Możesz również przetworzyć odpowiedź przed przekazaniem jej do wywołania zwrotnego:

function foo(callback) {
    $.ajax({
        // ...
        success: function(response) {
            // For example, filter the response
            callback(filtered_response);
        }
    });
}

Łatwiej jest pisać kod za pomocą wywołań zwrotnych, niż może się wydawać. W końcu JavaScript w przeglądarce jest silnie sterowany zdarzeniami (zdarzenia DOM). Otrzymanie odpowiedzi Ajax to nic innego jak wydarzenie.
Problemy mogą pojawić się, gdy trzeba pracować z kodem innej firmy, ale większość problemów można rozwiązać, po prostu analizując przepływ aplikacji.

ES2015 +: Obiecuje za pomocą then ()

Obietnica API jest nowa funkcja ECMAScript 6 (ES2015), ale ma dobrą obsługę przeglądarki już. Istnieje również wiele bibliotek, które implementują standardowy interfejs API Promises i zapewniają dodatkowe metody ułatwiające korzystanie z funkcji asynchronicznych i ich komponowanie (np. Bluebird ).

Obietnice są pojemnikami na przyszłe wartości. Kiedy obietnica otrzyma wartość (zostanie rozwiązana ) lub gdy zostanie anulowana ( odrzucona ), powiadomi wszystkich swoich „słuchaczy”, którzy chcą uzyskać dostęp do tej wartości.

Zaletą zwykłych wywołań zwrotnych jest to, że pozwalają one oddzielić kod i są łatwiejsze do skomponowania.

Oto prosty przykład użycia obietnicy:

function delay() {
  // `delay` returns a promise
  return new Promise(function(resolve, reject) {
    // Only `delay` is able to resolve or reject the promise
    setTimeout(function() {
      resolve(42); // After 3 seconds, resolve the promise with value 42
    }, 3000);
  });
}

delay()
  .then(function(v) { // `delay` returns a promise
    console.log(v); // Log the value once it is resolved
  })
  .catch(function(v) {
    // Or do something else if it is rejected 
    // (it would not happen in this example, since `reject` is not called).
  });

W przypadku naszego połączenia Ajax możemy użyć takich obietnic:

function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(this.responseText);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);
    xhr.send();
  });
}

ajax("/echo/json")
  .then(function(result) {
    // Code depending on result
  })
  .catch(function() {
    // An error occurred
  });

Opisanie wszystkich korzyści, które obiecują, wykracza poza zakres tej odpowiedzi, ale jeśli napiszesz nowy kod, powinieneś poważnie je rozważyć. Zapewniają doskonałą abstrakcję i separację kodu.

Więcej informacji o obietnicach: skały HTML5 - obietnice JavaScript

Uwaga dodatkowa: odroczone obiekty jQuery

Odroczone obiekty są niestandardową implementacją obietnic jQuery (przed standaryzacją interfejsu Promise API). Zachowują się prawie jak obietnice, ale ujawniają nieco inny interfejs API.

Każda metoda Ajaks jQuery zwraca już „odroczony obiekt” (faktycznie obietnica odroczonego obiektu), który możesz po prostu zwrócić z funkcji:

function ajax() {
    return $.ajax(...);
}

ajax().done(function(result) {
    // Code depending on result
}).fail(function() {
    // An error occurred
});

Uwaga dodatkowa: Obietnica gotchas

Pamiętaj, że obietnice i odroczone obiekty są tylko pojemnikami na przyszłą wartość, a nie samą wartością. Załóżmy na przykład, że masz:

function checkPassword() {
    return $.ajax({
        url: '/password',
        data: {
            username: $('#username').val(),
            password: $('#password').val()
        },
        type: 'POST',
        dataType: 'json'
    });
}

if (checkPassword()) {
    // Tell the user they're logged in
}

Ten kod źle rozumie powyższe problemy z asynchronią. W szczególności $.ajax()nie zamraża kodu podczas sprawdzania strony „/ password” na serwerze - wysyła żądanie do serwera i podczas oczekiwania natychmiast zwraca obiekt jQuery Ajax Deferred, a nie odpowiedź z serwera. Oznacza to, że ifinstrukcja będzie zawsze pobierać ten obiekt odroczony, traktować go jak truei postępować tak, jakby użytkownik był zalogowany. Nie dobrze.

Ale poprawka jest łatwa:

checkPassword()
.done(function(r) {
    if (r) {
        // Tell the user they're logged in
    } else {
        // Tell the user their password was bad
    }
})
.fail(function(x) {
    // Tell the user something bad happened
});

Niezalecane: Synchroniczne wywołania „Ajax”

Jak wspomniałem, niektóre (!) Operacje asynchroniczne mają synchroniczne odpowiedniki. Nie opowiadam się za ich użyciem, ale ze względu na kompletność, oto jak możesz wykonać połączenie synchroniczne:

Bez jQuery

Jeśli bezpośrednio używasz XMLHTTPRequestobiektu, przekaż falsejako trzeci argument do .open.

jQuery

Jeśli używasz jQuery , możesz ustawić asyncopcję na false. Zauważ, że ta opcja jest przestarzała od jQuery 1.8. Następnie możesz albo użyć successwywołania zwrotnego, albo uzyskać dostęp do responseTextwłaściwości obiektu jqXHR :

function foo() {
    var jqXHR = $.ajax({
        //...
        async: false
    });
    return jqXHR.responseText;
}

Jeśli używasz innej metody Ajax jQuery, takiej jak $.get, $.getJSONitp., Musisz ją zmienić na $.ajax(ponieważ możesz przekazać tylko parametry konfiguracyjne $.ajax).

Heads-up! Nie można wykonać synchronicznego żądania JSONP . JSONP ze swej natury jest zawsze asynchroniczny (jeszcze jeden powód, aby nawet nie rozważać tej opcji).

Jeśli nie używasz jQuery w kodzie, ta odpowiedź jest dla Ciebie

Twój kod powinien być mniej więcej taki:

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
    return httpRequest.responseText;
}

var result = foo(); // always ends up being 'undefined'

Felix Kling wykonał świetną robotę, pisząc odpowiedź dla osób używających jQuery dla AJAX, postanowiłem zapewnić alternatywę dla ludzi, którzy nie są.

( Uwaga: dla osób korzystających z nowego fetchAPI, Angulara lub obietnic dodałem inną odpowiedź poniżej )

Co masz do czynienia?

To jest krótkie podsumowanie „Wyjaśnienia problemu” z drugiej odpowiedzi, jeśli nie jesteś pewien po przeczytaniu tego, przeczytaj to.

W AJAX oznacza asynchroniczny . Oznacza to, że wysłanie żądania (a raczej otrzymanie odpowiedzi) jest usuwane z normalnego przepływu wykonania. W twoim przykładzie natychmiast zwraca, a następna instrukcja, jest wykonywana przed funkcją, którą przekazałeś jako wywołanie zwrotne..sendreturn result;success

Oznacza to, że gdy wracasz, zdefiniowany przez ciebie detektor jeszcze się nie uruchomił, co oznacza, że ​​zwracana wartość nie została zdefiniowana.

Oto prosta analogia

function getFive(){ 
    var a;
    setTimeout(function(){
         a=5;
    },10);
    return a;
}

(Skrzypce)

Wartość azwracana jest, undefinedponieważ a=5część nie została jeszcze wykonana. AJAX działa w ten sposób, zwracasz wartość, zanim serwer będzie miał szansę powiedzieć przeglądarce, co to jest.

Jednym z możliwych rozwiązań tego problemu jest ponowne aktywne kodowanie , informujące program, co ma robić po zakończeniu obliczeń.

function onComplete(a){ // When the code completes, do this
    alert(a);
}

function getFive(whenDone){ 
    var a;
    setTimeout(function(){
         a=5;
         whenDone(a);
    },10);
}

To się nazywa CPS . Zasadniczo przekazujemy getFiveakcję do wykonania po jej zakończeniu, mówimy naszemu kodowi, jak zareagować po zakończeniu zdarzenia (jak nasze wywołanie AJAX lub w tym przypadku limit czasu).

Wykorzystanie byłoby:

getFive(onComplete);

Co powinno ostrzec „5” na ekranie. (Skrzypce) .

Możliwe rozwiązania

Istnieją zasadniczo dwa sposoby rozwiązania tego problemu:

1. Zsynchronizuj połączenie AJAX (nazwijmy to SJAX).
2. Zmień strukturę kodu, aby działał poprawnie z wywołaniami zwrotnymi.

1. Synchroniczny AJAX - nie rób tego !!

Jeśli chodzi o synchroniczny AJAX, nie rób tego! Odpowiedź Felixa podnosi kilka przekonujących argumentów na temat tego, dlaczego jest to zły pomysł. Podsumowując, zawiesi przeglądarkę użytkownika, dopóki serwer nie zwróci odpowiedzi i spowoduje bardzo złe wrażenia użytkownika. Oto kolejne krótkie podsumowanie zaczerpnięte z MDN na temat tego, dlaczego:

XMLHttpRequest obsługuje zarówno synchroniczną, jak i asynchroniczną komunikację. Ogólnie jednak ze względów wydajnościowych preferowane powinny być żądania asynchroniczne niż żądania synchroniczne.

Krótko mówiąc, żądania synchroniczne blokują wykonywanie kodu ... ... może to powodować poważne problemy ...

Jeśli mają to zrobić, można przekazać flagi: Oto jak to zrobić:

var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {// That's HTTP for 'ok'
  console.log(request.responseText);
}

2. Kod restrukturyzacji

Pozwól swojej funkcji zaakceptować oddzwonienie. W tym przykładzie foomożna wprowadzić kod, aby akceptować oddzwonienie. Powiemy naszemu kodowi, jak zareagować po foozakończeniu.

Więc:

var result = foo();
// code that depends on `result` goes here

Staje się:

foo(function(result) {
    // code that depends on `result`
});

Przekazaliśmy tutaj funkcję anonimową, ale równie łatwo moglibyśmy przekazać odwołanie do istniejącej funkcji, dzięki czemu wygląda ona następująco:

function myHandler(result) {
    // code that depends on `result`
}
foo(myHandler);

Aby uzyskać więcej informacji o tym, jak tego rodzaju projektowanie połączeń zwrotnych jest wykonywane, sprawdź odpowiedź Felixa.

Teraz zdefiniujmy sam foo, aby działał odpowiednio

function foo(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){ // when the request is loaded
       callback(httpRequest.responseText);// we're calling our method
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}

(skrzypce)

Teraz sprawiliśmy, że nasza funkcja foo akceptuje działanie, które zostanie uruchomione, gdy AJAX zakończy się pomyślnie, możemy to rozszerzyć, sprawdzając, czy status odpowiedzi nie ma wartości 200 i działając odpowiednio (utwórz moduł obsługi błędów i tym podobne). Skutecznie rozwiązujemy nasz problem.

Jeśli nadal masz trudności ze zrozumieniem tego, przeczytaj AJAX przewodnik dla początkujących w MDN.

XMLHttpRequest 2 (przede wszystkim przeczytaj odpowiedzi Benjamina Gruenbauma i Felixa Klinga )

Jeśli nie używasz jQuery i chcesz mieć ładny krótki XMLHttpRequest 2, który działa w nowoczesnych przeglądarkach, a także w przeglądarkach mobilnych, sugeruję użyć go w ten sposób:

function ajax(a, b, c){ // URL, callback, just a placeholder
  c = new XMLHttpRequest;
  c.open('GET', a);
  c.onload = b;
  c.send()
}

Jak widzisz:

1. Jest krótszy niż wszystkie inne wymienione funkcje.
2. Oddzwanianie jest ustawiane bezpośrednio (więc bez dodatkowych niepotrzebnych zamknięć).
3. Wykorzystuje nowy onload (więc nie musisz sprawdzać statusu readystate &&)
4. Są też inne sytuacje, których nie pamiętam, które sprawiają, że XMLHttpRequest 1 jest denerwujący.

Istnieją dwa sposoby uzyskania odpowiedzi na to wywołanie Ajax (trzy przy użyciu nazwy zmiennej XMLHttpRequest):

Najprostszy:

this.response

Lub jeśli z jakiegoś powodu jesteś bind()oddzwanianiem do klasy:

e.target.response

Przykład:

function callback(e){
  console.log(this.response);
}
ajax('URL', callback);

Lub (powyższe jest lepsze, anonimowe funkcje zawsze stanowią problem):

ajax('URL', function(e){console.log(this.response)});

Nic prostszego.

Teraz niektórzy ludzie zapewne powiedzą, że lepiej jest użyć onreadystatechange lub nawet nazwy zmiennej XMLHttpRequest. To jest źle.

Sprawdź zaawansowane funkcje XMLHttpRequest

Obsługuje wszystkie * nowoczesne przeglądarki. I mogę potwierdzić, ponieważ używam tego podejścia, ponieważ istnieje XMLHttpRequest 2. Nigdy nie miałem żadnego problemu we wszystkich przeglądarkach, z których korzystam.

onreadystatechange jest przydatny tylko wtedy, gdy chcesz uzyskać nagłówki w stanie 2.

Używanie XMLHttpRequestnazwy zmiennej to kolejny duży błąd, ponieważ musisz wykonać wywołanie zwrotne wewnątrz zamknięć onload / oreadystatechange, w przeciwnym razie ją utracisz.

Teraz, jeśli chcesz czegoś bardziej złożonego za pomocą post i FormData, możesz łatwo rozszerzyć tę funkcję:

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.send(d||null)
}

Znowu ... jest to bardzo krótka funkcja, ale pobiera i wysyła.

Przykłady użycia:

x(url, callback); // By default it's get so no need to set
x(url, callback, 'post', {'key': 'val'}); // No need to set post data

Lub przekaż pełny element form ( document.getElementsByTagName('form')[0]):

var fd = new FormData(form);
x(url, callback, 'post', fd);

Lub ustaw wartości niestandardowe:

var fd = new FormData();
fd.append('key', 'val')
x(url, callback, 'post', fd);

Jak widać, nie wdrożyłem synchronizacji ... to zła rzecz.

Powiedziawszy to ... dlaczego nie zrobić tego w prosty sposób?

Jak wspomniano w komentarzu, użycie error && synchronous całkowicie łamie sens odpowiedzi. Jaka jest dobra krótka droga do właściwego korzystania z Ajax?

Obsługa błędów

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.onerror = error;
  c.send(d||null)
}

function error(e){
  console.log('--Error--', this.type);
  console.log('this: ', this);
  console.log('Event: ', e)
}
function displayAjax(e){
  console.log(e, this);
}
x('WRONGURL', displayAjax);

W powyższym skrypcie masz moduł obsługi błędów, który jest statycznie zdefiniowany, aby nie wpływał na działanie funkcji. Program obsługi błędów może być również używany do innych funkcji.

Ale aby naprawdę wyjść z błędu, jedynym sposobem jest napisanie niewłaściwego adresu URL, w którym to przypadku każda przeglądarka zgłasza błąd.

Procedury obsługi błędów mogą być przydatne, jeśli ustawisz niestandardowe nagłówki, ustaw właściwość responseType na bufor tablicy obiektów blob lub cokolwiek ...

Nawet jeśli podasz metodę „POSTAPAPAP” jako metodę, nie spowoduje to błędu.

Nawet jeśli podasz „fdggdgilfdghfldj” jako dane formalne, nie spowoduje to błędu.

W pierwszym przypadku błąd znajduje się wewnątrz displayAjax()pod this.statusTextjako Method not Allowed.

W drugim przypadku po prostu działa. Musisz sprawdzić po stronie serwera, czy przekazałeś odpowiednie dane postu.

niedozwolone w wielu domenach automatycznie generuje błąd.

W odpowiedzi na błąd nie ma kodów błędów.

Jest tylko to, this.typeco jest ustawione na błąd.

Po co dodawać moduł obsługi błędów, jeśli całkowicie nie ma się kontroli nad błędami? Większość błędów jest zwracanych w tym funkcji zwrotnej displayAjax().

Więc: Nie ma potrzeby sprawdzania błędów, jeśli możesz poprawnie skopiować i wkleić adres URL. ;)

PS: Jako pierwszy test napisałem x ('x', displayAjax) ... i całkowicie otrzymałem odpowiedź ... ??? Sprawdziłem więc folder, w którym znajduje się HTML, i znalazłem plik o nazwie „x.xml”. Więc nawet jeśli zapomnisz rozszerzenia swojego pliku XMLHttpRequest 2, ZNAJDUJE SIĘ . LOL'd

Czytaj plik synchroniczny

Nie rób tego

Jeśli chcesz zablokować przeglądarkę na jakiś czas, załaduj ładny duży .txtplik synchroniczny.

function omg(a, c){ // URL
  c = new XMLHttpRequest;
  c.open('GET', a, true);
  c.send();
  return c; // Or c.response
}

Teraz możesz zrobić

 var res = omg('thisIsGonnaBlockThePage.txt');

Nie ma innego sposobu na zrobienie tego w sposób niesynchroniczny. (Tak, z pętlą setTimeout ... ale poważnie?)

Kolejną kwestią jest ... jeśli pracujesz z interfejsami API lub tylko plikami własnej listy lub czymkolwiek, zawsze używasz różnych funkcji dla każdego żądania ...

Tylko jeśli masz stronę, na której zawsze ładujesz ten sam kod XML / JSON lub cokolwiek, czego potrzebujesz tylko jedną funkcję. W takim przypadku zmodyfikuj trochę funkcję Ajax i zastąp b funkcją specjalną.

Powyższe funkcje są do podstawowego użytku.

Jeśli chcesz PRZEDŁUŻYĆ funkcję ...

Tak, możesz.

Korzystam z wielu interfejsów API, a jedną z pierwszych funkcji, które integruję na każdej stronie HTML, jest pierwsza funkcja Ajax w tej odpowiedzi, tylko z GET ...

Ale możesz zrobić wiele rzeczy z XMLHttpRequest 2:

Zrobiłem menedżera pobierania (używając zakresów po obu stronach z CV, lidera plików, systemu plików), różnych konwerterów resizera obrazu za pomocą płótna, wypełniania internetowych baz danych SQL obrazami base64 i wiele więcej ... Ale w takich przypadkach powinieneś utworzyć funkcję tylko do tego cel ... czasami potrzebujesz obiektu blob, buforów macierzy, możesz ustawić nagłówki, przesłonić typ MIME i jest o wiele więcej ...

Ale pytanie tutaj brzmi: jak zwrócić odpowiedź Ajax ... (dodałem prosty sposób).

Jeśli korzystasz z obietnic, ta odpowiedź jest dla Ciebie.

Oznacza to AngularJS, jQuery (z odroczeniem), zastępowanie natywnego XHR (pobieranie), EmberJS, zapisywanie BackboneJS lub dowolną bibliotekę węzłów, która zwraca obietnice.

Twój kod powinien być mniej więcej taki:

function foo() {
    var data;
    // or $.get(...).then, or request(...).then, or query(...).then
    fetch("/echo/json").then(function(response){
        data = response.json();
    });
    return data;
}

var result = foo(); // result is always undefined no matter what.

Felix Kling wykonał świetną robotę, pisząc odpowiedź dla osób używających jQuery z wywołaniami zwrotnymi dla AJAX. Mam odpowiedź dla natywnego XHR. Ta odpowiedź dotyczy ogólnego użycia obietnic na interfejsie użytkownika lub na zapleczu.

Podstawowy problem

Model współbieżności JavaScript w przeglądarce i na serwerze z NodeJS / io.js jest asynchroniczny i reaktywny .

Za każdym razem, gdy wywołujesz metodę, która zwraca obietnicę, procedury thenobsługi są zawsze wykonywane asynchronicznie - to znaczy po kodzie poniżej nich, który nie jest w .thenmodule obsługi.

Znaczy to, że wracasz datado thenobsługi nie masz zdefiniowanego jeszcze nie wykonać. To z kolei oznacza, że ​​zwracana wartość nie została ustawiona na prawidłową wartość w czasie.

Oto prosta analogia do problemu:

    function getFive(){
        var data;
        setTimeout(function(){ // set a timer for one second in the future
           data = 5; // after a second, do this
        }, 1000);
        return data;
    }
    document.body.innerHTML = getFive(); // `undefined` here and not 5

Wartość datawynosi, undefinedponieważ data = 5część nie została jeszcze wykonana. Prawdopodobnie wykona się za sekundę, ale do tego czasu nie ma znaczenia dla zwracanej wartości.

Ponieważ operacja jeszcze się nie wydarzyła (AJAX, połączenie z serwerem, IO, timer), zwracasz wartość, zanim żądanie dostanie szansę, by powiedzieć Twojemu kodowi, jaka jest ta wartość.

Jednym z możliwych rozwiązań tego problemu jest ponowne aktywne kodowanie , informujące program, co ma robić po zakończeniu obliczeń. Obietnice aktywnie to umożliwiają, ponieważ mają charakter czasowy (wrażliwy na czas).

Szybkie podsumowanie obietnic

Obietnica jest wartością w czasie . Obietnice mają swój stan, zaczynają się jako oczekujące bez wartości i mogą zostać rozliczone na:

• spełnione, co oznacza, że ​​obliczenia zostały zakończone pomyślnie.
• odrzucono, co oznacza, że ​​obliczenia nie powiodły się.

Obietnica może zmienić stan tylko raz, po czym zawsze pozostanie w tym samym stanie na zawsze. Możesz dołączyć programy thenobsługi do obietnic, aby wydobyć ich wartość i obsłużyć błędy. thenteleskopowe umożliwiają łączenia rozmów. Obietnice są tworzone przy użyciu interfejsów API, które je zwracają . Na przykład, bardziej nowoczesna zamiana AJAX fetchlub $.getobietnica zwrotu jQuery .

Kiedy zadzwonić .thenna obietnicy i powrotnej coś z tym - mamy obietnicę dla przetworzonego wartości . Jeśli zwrócimy kolejną obietnicę, otrzymamy niesamowite rzeczy, ale trzymajmy nasze konie.

Z obietnicami

Zobaczmy, jak możemy rozwiązać powyższy problem za pomocą obietnic. Po pierwsze, pokażmy nasze zrozumienie stanów obietnicy z góry, używając konstruktora Promise do utworzenia funkcji opóźnienia:

function delay(ms){ // takes amount of milliseconds
    // returns a new promise
    return new Promise(function(resolve, reject){
        setTimeout(function(){ // when the time is up
            resolve(); // change the promise to the fulfilled state
        }, ms);
    });
}

Teraz, po przekonwertowaniu setTimeout do korzystania z obietnic, możemy użyć, thenaby liczyć:

function delay(ms){ // takes amount of milliseconds
  // returns a new promise
  return new Promise(function(resolve, reject){
    setTimeout(function(){ // when the time is up
      resolve(); // change the promise to the fulfilled state
    }, ms);
  });
}

function getFive(){
  // we're RETURNING the promise, remember, a promise is a wrapper over our value
  return delay(100).then(function(){ // when the promise is ready
      return 5; // return the value 5, promises are all about return values
  })
}
// we _have_ to wrap it like this in the call site, we can't access the plain value
getFive().then(function(five){ 
   document.body.innerHTML = five;
});

Zasadniczo, zamiast wrócić do wartości , której nie możemy zrobić, ponieważ model współbieżności - wracamy do otoki dla wartości, które możemy rozpakować z then. To jest jak pudełko, które można otworzyć then.

Stosuję to

To samo dotyczy Twojego oryginalnego wywołania API, możesz:

function foo() {
    // RETURN the promise
    return fetch("/echo/json").then(function(response){
        return response.json(); // process it inside the `then`
    });
}

foo().then(function(response){
    // access the value inside the `then`
})

Więc to działa równie dobrze. Dowiedzieliśmy się, że nie możemy zwracać wartości z już asynchronicznych wywołań, ale możemy używać obietnic i łączyć je w celu przetwarzania. Wiemy już, jak zwrócić odpowiedź z połączenia asynchronicznego.

ES2015 (ES6)

ES6 wprowadza generatory, które są funkcjami, które mogą powrócić na środku, a następnie wznowić od momentu, w którym były. Jest to zwykle przydatne w przypadku sekwencji, na przykład:

function* foo(){ // notice the star, this is ES6 so new browsers/node/io only
    yield 1;
    yield 2;
    while(true) yield 3;
}

Jest funkcją, która zwraca iterator nad sekwencją, 1,2,3,3,3,3,....którą można iterować. Chociaż jest to interesujące samo w sobie i otwiera wiele możliwości, jest jeden szczególnie interesujący przypadek.

Jeśli tworzona przez nas sekwencja jest sekwencją akcji, a nie liczb - możemy wstrzymać funkcję, ilekroć akcja zostanie wykonana, i poczekać na nią, zanim wznowimy funkcję. Zamiast sekwencji liczb potrzebujemy sekwencji przyszłych wartości - to znaczy: obietnic.

Ta nieco trudna, ale bardzo skuteczna sztuczka pozwala nam pisać kod asynchroniczny w sposób synchroniczny. Jest kilku „biegaczy”, którzy robią to za Ciebie, napisanie jednego to kilka krótkich linii kodu, ale wykracza poza zakres tej odpowiedzi. Będę tu używał Bluebird Promise.coroutine, ale są też inne opakowania, takie jak colub Q.async.

var foo = coroutine(function*(){
    var data = yield fetch("/echo/json"); // notice the yield
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
});

Ta metoda sama w sobie zwraca obietnicę, którą możemy spożywać z innych koroutyn. Na przykład:

var main = coroutine(function*(){
   var bar = yield foo(); // wait our earlier coroutine, it returns a promise
   // server call done here, code below executes when done
   var baz = yield fetch("/api/users/"+bar.userid); // depends on foo's result
   console.log(baz); // runs after both requests done
});
main();

ES2016 (ES7)

W ES7 jest to jeszcze bardziej znormalizowane, jest teraz kilka propozycji, ale we wszystkich z nich możesz awaitobiecać. To jest po prostu „cukier” (ładniejsza składnia) dla powyższej propozycji ES6 poprzez dodanie słów kluczowych asynci await. Robiąc powyższy przykład:

async function foo(){
    var data = await fetch("/echo/json"); // notice the await
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
}

Nadal zwraca obietnicę tak samo :)

Używasz Ajax niepoprawnie. Chodzi o to, aby nie zwracać niczego, ale zamiast tego przekazać dane do czegoś, co nazywa się funkcją wywołania zwrotnego, która obsługuje dane.

To jest:

function handleData( responseData ) {

    // Do what you want with the data
    console.log(responseData);
}

$.ajax({
    url: "hi.php",
    ...
    success: function ( data, status, XHR ) {
        handleData(data);
    }
});

Zwracanie czegokolwiek w module obsługi przesyłania nic nie robi. Zamiast tego musisz przekazać dane lub zrobić to, co chcesz, bezpośrednio w funkcji sukcesu.

Najprostszym rozwiązaniem jest utworzenie funkcji JavaScript i wywołanie jej dla successwywołania zwrotnego Ajax .

function callServerAsync(){
    $.ajax({
        url: '...',
        success: function(response) {

            successCallback(response);
        }
    });
}

function successCallback(responseObj){
    // Do something like read the response and show data
    alert(JSON.stringify(responseObj)); // Only applicable to JSON response
}

function foo(callback) {

    $.ajax({
        url: '...',
        success: function(response) {
           return callback(null, response);
        }
    });
}

var result = foo(function(err, result){
          if (!err)
           console.log(result);    
}); 

Odpowiem okropnie wyglądającym, ręcznie rysowanym komiksem. Drugi obraz jest powodem, dla którego resultznajduje się undefinedw twoim kodzie przykład.

Kątowy 1

Dla osób korzystających z AngularJS , można poradzić sobie z tą sytuacją przy użyciu Promises.

Tutaj mówi:

Obietnic można użyć do oderwania funkcji asynchronicznych i umożliwia połączenie wielu funkcji razem.

Można znaleźć ładne wyjaśnienie tutaj również.

Przykład znaleziony w dokumentach wymienionych poniżej.

  promiseB = promiseA.then(
    function onSuccess(result) {
      return result + 1;
    }
    ,function onError(err) {
      //Handle error
    }
  );

 // promiseB will be resolved immediately after promiseA is resolved 
 // and its value will be the result of promiseA incremented by 1.

Angular2 i późniejsze

W Angular2ze spojrzeniem na poniższym przykładzie, ale jego zalecany do stosowania Observablesz Angular2.

 search(term: string) {
     return this.http
  .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
  .map((response) => response.json())
  .toPromise();

}

Możesz to wykorzystać w ten sposób,

search() {
    this.searchService.search(this.searchField.value)
      .then((result) => {
    this.result = result.artists.items;
  })
  .catch((error) => console.error(error));
}

Zobacz oryginalny post tutaj. Ale Maszynopis nie obsługuje natywnych obietnic es6 , jeśli chcesz go użyć, możesz potrzebować do tego wtyczki.

Dodatkowo tutaj są określone specyfikacje obietnic .

Większość odpowiedzi tutaj zawiera przydatne sugestie dotyczące pojedynczej operacji asynchronicznej, ale czasami pojawia się, gdy trzeba wykonać operację asynchroniczną dla każdej pozycji w tablicy lub innej strukturze podobnej do listy. Pokusa polega na tym, aby to zrobić:

// WRONG
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log(results); // E.g., using them, returning them, etc.

Przykład:

// WRONG
var theArray = [1, 2, 3];
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log("Results:", results); // E.g., using them, returning them, etc.

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

Powodem, dla którego nie działa, jest to, że wywołania zwrotne z doSomethingAsyncjeszcze nie zostały uruchomione, zanim spróbujesz użyć wyników.

Tak więc, jeśli masz tablicę (lub jakąś listę) i chcesz wykonać operacje asynchroniczne dla każdego wpisu, masz dwie opcje: Wykonaj operacje równolegle (nakładające się) lub szeregowo (jedna po drugiej w sekwencji).

Równolegle

Możesz uruchomić je wszystkie i śledzić liczbę oczekiwanych oddzwonień, a następnie użyć wyników, gdy otrzymujesz tyle oddzwonień:

var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

Przykład:

var theArray = [1, 2, 3];
var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(Moglibyśmy pozbyć się expectingi po prostu użyć results.length === theArray.length, ale to pozostawia nas otwartymi na możliwość, która theArrayjest zmieniana, gdy połączenia są zaległe ...)

Zwróć uwagę, w jaki sposób używamy indexfrom od, forEachaby zapisać wynik w resultstej samej pozycji, co wpis, którego dotyczy, nawet jeśli wyniki pojawiają się poza kolejnością (ponieważ wywołania asynchroniczne niekoniecznie kończą się w kolejności, w której zostały uruchomione).

Ale co, jeśli chcesz zwrócić te wyniki z funkcji? Jak wskazały inne odpowiedzi, nie możesz; musisz zaakceptować funkcję i oddzwonić (lub zwrócić obietnicę ). Oto wersja oddzwaniania:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

Przykład:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

Lub oto wersja zwracająca Promisezamiast tego:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Oczywiście, jeśli doSomethingAsyncprzekażą nam błędy, rejectodrzucilibyśmy obietnicę, gdy dostaliśmy błąd).

Przykład:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(Lub możesz zrobić opakowanie, doSomethingAsyncktóre zwróci obietnicę, a następnie wykonaj poniższe czynności ...)

Jeśli doSomethingAsyncdajesz obietnicę , możesz użyć Promise.all:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry);
    }));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Jeśli wiesz, że doSomethingAsynczignoruje drugi i trzeci argument, możesz po prostu przekazać go bezpośrednio map( mapwywołuje funkcję zwrotną za pomocą trzech argumentów, ale większość ludzi używa tylko pierwszego).

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Przykład:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

Zauważ, że Promise.allrozwiązuje swoją obietnicę za pomocą szeregu wyników wszystkich obietnic, które dajesz, gdy wszystkie zostaną rozpatrzone, lub odrzuca obietnicę, gdy pierwsza z obietnic, które dajesz, odrzuca.

Seria

Załóżmy, że nie chcesz, aby operacje były równoległe? Jeśli chcesz je uruchamiać jeden po drugim, musisz poczekać na zakończenie każdej operacji przed rozpoczęciem następnej. Oto przykład funkcji, która to robi i wywołuje wywołanie zwrotne z wynikiem:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

(Ponieważ wykonujemy pracę szeregowo, możemy po prostu użyć, results.push(result)ponieważ wiemy, że nie uzyskamy wyników poza kolejnością. W powyższym przypadku mogliśmy zastosować results[index] = result;, ale w niektórych z poniższych przykładów nie mamy indeksu używać.)

Przykład:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(Lub ponownie zbuduj opakowanie, doSomethingAsyncktóre daje ci obietnicę i wykonaj poniższe czynności ...)

Jeśli doSomethingAsyncdaje obietnicę, jeśli możesz użyć składni ES2017 + (być może z transpilerem takim jak Babel ), możesz użyć asyncfunkcji za pomocą for-ofi await:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

Przykład:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

Jeśli nie możesz użyć składni ES2017 + (jeszcze), możesz użyć wariacji na wzorzec „Obietnica zmniejszenia” (jest to bardziej złożone niż zwykłe zmniejszenie Obietnicy, ponieważ nie przekazujemy wyniku z jednego do drugiego, ale zamiast tego gromadzenie ich wyników w tablicy):

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Przykład:

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

... co jest mniej kłopotliwe dzięki funkcjom strzałek ES2015 + :

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

Przykład:

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

Spójrz na ten przykład:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

    var getJoke = function(){
        return $http.get('http://api.icndb.com/jokes/random').then(function(res){
            return res.data.value;  
        });
    }

    getJoke().then(function(res) {
        console.log(res.joke);
    });
});

Jak widać getJokejest zwrócenie rozwiązany obietnicę (nie zostanie rozwiązany po powrocie res.data.value). Poczekaj więc, aż żądanie $ http.get zostanie zakończone, a następnie zostanie uruchomiony plik console.log (res.joke) (jako normalny przepływ asynchroniczny).

To jest plnkr:

http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg/

Sposób ES6 (asynchronizacja - oczekiwanie)

(function(){
  async function getJoke(){
    let response = await fetch('http://api.icndb.com/jokes/random');
    let data = await response.json();
    return data.value;
  }

  getJoke().then((joke) => {
    console.log(joke);
  });
})();

Jest to jedno z miejsc, w których dwa sposoby wiązania danych lub przechowywania danych, które są używane w wielu nowych ramach JavaScript, będą dla Ciebie świetne ...

Więc jeśli używasz Angulara, Reacta lub jakiegokolwiek innego frameworka, który łączy dwa sposoby wiązania lub przechowywania danych, ten problem jest po prostu dla Ciebie naprawiony, więc jednym słowem, twój wynik jest undefinedna pierwszym etapie, więc masz result = undefinedprzed otrzymaniem dane, a następnie, gdy tylko otrzymasz wynik, zostanie on zaktualizowany i zostanie przypisany do nowej wartości, która odpowiada na wywołanie Ajax ...

Ale jak możesz to zrobić na przykład w javascript lub jQuery, tak jak zadałeś to pytanie?

Możesz użyć funkcji zwrotnej , obietnicy i ostatnio obserwowalnej, aby obsłużyć ją za Ciebie, na przykład w obietnicach mamy jakąś funkcję, taką jak success()lub, then()która zostanie wykonana, gdy Twoje dane będą dla Ciebie gotowe, to samo z funkcją zwrotną lub subskrypcją na obserwowalnym .

Na przykład w twoim przypadku, w którym używasz jQuery , możesz zrobić coś takiego:

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); //after we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); //fooDone has the data and console.log it
    };

    foo(); //call happens here
});

Aby uzyskać więcej informacji, zapoznaj się z obietnicami i obserwowalnościami, które są nowszymi sposobami wykonywania tego asynchronicznego działania.

Jest to bardzo powszechny problem, z którym zmagamy się, zmagając się z „tajemnicami” JavaScript. Pozwólcie mi dzisiaj spróbować wyjaśnić tę tajemnicę.

Zacznijmy od prostej funkcji JavaScript:

function foo(){
// do something 
 return 'wohoo';
}

let bar = foo(); // bar is 'wohoo' here

Jest to proste wywołanie funkcji synchronicznej (gdzie każdy wiersz kodu jest „zakończony swoim zadaniem” przed kolejnym w sekwencji), a wynik jest taki sam, jak oczekiwano.

Dodajmy teraz nieco zwrotów akcji, wprowadzając niewielkie opóźnienie w naszej funkcji, aby wszystkie wiersze kodu nie były „gotowe” w sekwencji. W ten sposób będzie emulować asynchroniczne zachowanie funkcji:

function foo(){
 setTimeout( ()=>{
   return 'wohoo';
  }, 1000 )
}

let bar = foo() // bar is undefined here

Proszę bardzo, to opóźnienie po prostu zepsuło oczekiwaną funkcjonalność! Ale co dokładnie się stało? Cóż, jest to całkiem logiczne, jeśli spojrzysz na kod. funkcja foo()po wykonaniu nic nie zwraca (w ten sposób zwracana jest wartość undefined), ale uruchamia stoper, który wykonuje funkcję po 1 s, aby zwrócić „wohoo”. Ale jak widać, wartość przypisana do baru to natychmiast zwrócone rzeczy z foo (), co nie jest niczym, to jest po prostu undefined.

Jak więc rozwiązać ten problem?

Zapytajmy naszą funkcję o OBIETNICA . Obietnica tak naprawdę chodzi o to, co to znaczy: oznacza, że ​​funkcja gwarantuje, że zapewnisz wszelkie dane wyjściowe, które otrzyma w przyszłości. zobaczmy więc, jak działa nasz mały problem powyżej:

function foo(){
   return new Promise( (resolve, reject) => { // I want foo() to PROMISE me something
    setTimeout ( function(){ 
      // promise is RESOLVED , when execution reaches this line of code
       resolve('wohoo')// After 1 second, RESOLVE the promise with value 'wohoo'
    }, 1000 )
  })
}

let bar ; 
foo().then( res => {
 bar = res;
 console.log(bar) // will print 'wohoo'
});

Tak więc podsumowanie jest następujące: aby poradzić sobie z funkcjami asynchronicznymi, takimi jak wywołania ajax itp., Możesz użyć obietnicy resolvewartości (którą zamierzasz zwrócić). Krótko mówiąc, rozwiązujesz wartość zamiast zwracać , w funkcjach asynchronicznych.

AKTUALIZACJA (obiecuje asynchronicznie / oczekuj)

Oprócz then/catchpracy z obietnicami istnieje jeszcze jedno podejście. Chodzi o to, aby rozpoznać funkcję asynchroniczną, a następnie poczekać na spełnienie obietnic przed przejściem do następnego wiersza kodu. To wciąż tylko promisespod maską, ale z innym podejściem syntaktycznym. Aby wszystko było bardziej zrozumiałe, możesz znaleźć porównanie poniżej:

następnie wersja / catch:

function saveUsers(){
     getUsers()
      .then(users => {
         saveSomewhere(users);
      })
      .catch(err => {
          console.error(err);
       })
 }

async / oczekiwanie na wersję:

  async function saveUsers(){
     try{
        let users = await getUsers()
        saveSomewhere(users);
     }
     catch(err){
        console.error(err);
     }
  }

Innym podejściem do zwracania wartości z funkcji asynchronicznej jest przekazanie obiektu, który zapisze wynik funkcji asynchronicznej.

Oto przykład tego samego:

var async = require("async");

// This wires up result back to the caller
var result = {};
var asyncTasks = [];
asyncTasks.push(function(_callback){
    // some asynchronous operation
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;
            _callback();
        }
    });
});

async.parallel(asyncTasks, function(){
    // result is available after performing asynchronous operation
    console.log(result)
    console.log('Done');
});

Korzystam z resultobiektu do przechowywania wartości podczas operacji asynchronicznej. Dzięki temu wynik będzie dostępny nawet po zadaniu asynchronicznym.

Często używam tego podejścia. Byłbym zainteresowany, aby dowiedzieć się, jak dobrze to podejście działa, gdy w grę wchodzi podłączenie wyniku z powrotem przez kolejne moduły.

Podczas gdy obietnice i oddzwaniania działają dobrze w wielu sytuacjach, trudno jest wyrazić coś z tyłu:

if (!name) {
  name = async1();
}
async2(name);

Skończysz przechodzić async1; sprawdź, czy namejest niezdefiniowany, czy nie i odpowiednio oddzwoń.

async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)

Chociaż w małych przykładach jest to w porządku , denerwuje się, gdy masz wiele podobnych przypadków i obsługi błędów.

Fibers pomaga w rozwiązaniu problemu.

var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}

Możesz sprawdzić projekt tutaj .

Poniższy przykład, który napisałem, pokazuje, jak to zrobić

• Obsługa asynchronicznych połączeń HTTP;
• Poczekaj na odpowiedź od każdego wywołania API;
• Użyj wzorca obietnicy ;
• Użyj wzorca Promise.all , aby dołączyć do wielu połączeń HTTP;

Ten działający przykład jest samodzielny. Zdefiniuje prosty obiekt żądania, który używa XMLHttpRequestobiektu okna do wykonywania połączeń. Zdefiniuje prostą funkcję oczekiwania na wypełnienie szeregu obietnic.

Kontekst. Przykładem jest zapytanie do punktu końcowego Spotify Web API w celu wyszukania playlistobiektów dla danego zestawu ciągów zapytań:

[
 "search?type=playlist&q=%22doom%20metal%22",
 "search?type=playlist&q=Adele"
]

Dla każdego elementu nowa obietnica uruchomi blok - ExecutionBlockprzeanalizuj wynik, zaplanuj nowy zestaw obietnic w oparciu o tablicę wyników, czyli listę userobiektów Spotify i wykonaj ExecutionProfileBlockasynchronicznie nowe wywołanie HTTP .

Następnie możesz zobaczyć zagnieżdżoną strukturę Promise, która pozwala spawnować wiele całkowicie asynchronicznych zagnieżdżonych wywołań HTTP i dołączać wyniki z każdego podzbioru wywołań Promise.all.

UWAGA Najnowsze searchinterfejsy API Spotify będą wymagały podania tokena dostępu w nagłówkach żądania:

-H "Authorization: Bearer {your access token}" 

Aby uruchomić następujący przykład, musisz umieścić token dostępu w nagłówkach żądania:

var spotifyAccessToken = "YourSpotifyAccessToken";
var console = {
    log: function(s) {
        document.getElementById("console").innerHTML += s + "<br/>"
    }
}

// Simple XMLHttpRequest
// based on https://davidwalsh.name/xmlhttprequest
SimpleRequest = {
    call: function(what, response) {
        var request;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // Internet Explorer
            try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (e) {
                try {
                  request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }

        // State changes
        request.onreadystatechange = function() {
            if (request.readyState === 4) { // Done
                if (request.status === 200) { // Complete
                    response(request.responseText)
                }
                else
                    response();
            }
        }
        request.open('GET', what, true);
        request.setRequestHeader("Authorization", "Bearer " + spotifyAccessToken);
        request.send(null);
    }
}

//PromiseAll
var promiseAll = function(items, block, done, fail) {
    var self = this;
    var promises = [],
                   index = 0;
    items.forEach(function(item) {
        promises.push(function(item, i) {
            return new Promise(function(resolve, reject) {
                if (block) {
                    block.apply(this, [item, index, resolve, reject]);
                }
            });
        }(item, ++index))
    });
    Promise.all(promises).then(function AcceptHandler(results) {
        if (done) done(results);
    }, function ErrorHandler(error) {
        if (fail) fail(error);
    });
}; //promiseAll

// LP: deferred execution block
var ExecutionBlock = function(item, index, resolve, reject) {
    var url = "https://api.spotify.com/v1/"
    url += item;
    console.log( url )
    SimpleRequest.call(url, function(result) {
        if (result) {

            var profileUrls = JSON.parse(result).playlists.items.map(function(item, index) {
                return item.owner.href;
            })
            resolve(profileUrls);
        }
        else {
            reject(new Error("call error"));
        }
    })
}

arr = [
    "search?type=playlist&q=%22doom%20metal%22",
    "search?type=playlist&q=Adele"
]

promiseAll(arr, function(item, index, resolve, reject) {
    console.log("Making request [" + index + "]")
    ExecutionBlock(item, index, resolve, reject);
}, function(results) { // Aggregated results

    console.log("All profiles received " + results.length);
    //console.log(JSON.stringify(results[0], null, 2));

    ///// promiseall again

    var ExecutionProfileBlock = function(item, index, resolve, reject) {
        SimpleRequest.call(item, function(result) {
            if (result) {
                var obj = JSON.parse(result);
                resolve({
                    name: obj.display_name,
                    followers: obj.followers.total,
                    url: obj.href
                });
            } //result
        })
    } //ExecutionProfileBlock

    promiseAll(results[0], function(item, index, resolve, reject) {
        //console.log("Making request [" + index + "] " + item)
        ExecutionProfileBlock(item, index, resolve, reject);
    }, function(results) { // aggregated results
        console.log("All response received " + results.length);
        console.log(JSON.stringify(results, null, 2));
    }

    , function(error) { // Error
        console.log(error);
    })

    /////

  },
  function(error) { // Error
      console.log(error);
  });

<div id="console" />

Mam obszernie omawiane rozwiązanie to tutaj .

Krótka odpowiedź brzmi: musisz zaimplementować funkcję oddzwaniania:

function callback(response) {
    // Here you can do what ever you want with the response object.
    console.log(response);
}

$.ajax({
    url: "...",
    success: callback
});

Odpowiedź 2017: możesz teraz robić dokładnie to, co chcesz w każdej bieżącej przeglądarce i węźle

To jest dość proste:

• Zwróć obietnicę
• Użyj „czekaj” , co powie JavaScript, aby czekał na obietnicę, która zostanie przetworzona na wartość (np. Odpowiedź HTTP)
• Dodaj słowo kluczowe „async” do funkcji nadrzędnej

Oto działająca wersja Twojego kodu:

(async function(){

var response = await superagent.get('...')
console.log(response)

})()

Oczekiwanie jest obsługiwane we wszystkich obecnych przeglądarkach i węźle 8

Js jest pojedynczym wątkiem.

Przeglądarkę można podzielić na trzy części:

1) Pętla zdarzeń

2) Interfejs API sieci Web

3) Kolejka zdarzeń

Pętla zdarzeń działa wiecznie, tj. Jest to rodzaj nieskończonej pętli. Kolejka zdarzeń to miejsce, w którym wszystkie funkcje są wypychane w przypadku jakiegoś zdarzenia (na przykład: kliknięcie), to jest jedna po drugiej przeprowadzana z kolejki i umieszczana w pętli zdarzeń, która wykonuje tę funkcję i przygotowuje ją samodzielnie dla następnej po pierwszej. Oznacza to, że wykonanie jednej funkcji nie rozpoczyna się, dopóki funkcja przed kolejką nie zostanie wykonana w pętli zdarzeń.

Pomyślmy teraz, że wepchnęliśmy dwie funkcje w kolejce, jedna służy do pobierania danych z serwera, a inna wykorzystuje te dane. Najpierw umieściliśmy funkcję serverRequest () w kolejce, a następnie funkcję useData (). funkcja serverRequest przechodzi w pętlę zdarzeń i wywołuje serwer, ponieważ nigdy nie wiemy, ile czasu zajmie pobranie danych z serwera, więc oczekuje się, że ten proces zajmie trochę czasu, więc zajęliśmy się pętlą zdarzeń, zawieszając naszą stronę, tam gdzie jest sieć Interfejs API odgrywa rolę, bierze tę funkcję z pętli zdarzeń i zajmuje się zwolnieniem pętli zdarzeń z serwera, dzięki czemu możemy wykonać kolejną funkcję z kolejki. Następną funkcją w kolejce jest funkcja useiseData (), która przechodzi w pętlę, ale ze względu na brak dostępnych danych, przechodzi marnowanie i wykonywanie następnej funkcji trwa do końca kolejki. (Nazywa się to wywoływaniem asynchronicznym, tzn. możemy zrobić coś innego, dopóki nie otrzymamy danych)

Załóżmy, że nasza funkcja serverRequest () zawiera instrukcję return w kodzie, gdy otrzymamy dane z serwera Web API, wypchną je w kolejce na końcu kolejki. Gdy jest on wypychany na końcu w kolejce, nie możemy wykorzystać jego danych, ponieważ w naszej kolejce nie ma już funkcji do wykorzystania tych danych.Dlatego nie można zwrócić czegoś z Async Call.

Zatem rozwiązaniem tego jest oddzwonienie lub obietnica .

Obraz z jednej z odpowiedzi tutaj, poprawnie wyjaśnia użycie wywołania zwrotnego ... Dajemy naszą funkcję (funkcję wykorzystującą dane zwrócone z serwera) do funkcji wywołującej serwer.

 function doAjax(callbackFunc, method, url) {
  var xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.open(method, url);
  xmlHttpReq.onreadystatechange = function() {

      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
        callbackFunc(xmlHttpReq.responseText);
      }


  }
  xmlHttpReq.send(null);

}

W moim Kodeksie nazywa się to jako

function loadMyJson(categoryValue){
  if(categoryValue==="veg")
  doAjax(print,"GET","http://localhost:3004/vegetables");
  else if(categoryValue==="fruits")
  doAjax(print,"GET","http://localhost:3004/fruits");
  else 
  console.log("Data not found");
}

Oddzwonienie Javscript.info

Możesz użyć tej niestandardowej biblioteki (napisanej przy użyciu Obietnicy), aby wykonać zdalne połączenie.

function $http(apiConfig) {
    return new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open(apiConfig.method, apiConfig.url);
        client.send();
        client.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                // Performs the function "resolve" when this.status is equal to 2xx.
                // Your logic here.
                resolve(this.response);
            }
            else {
                // Performs the function "reject" when this.status is different than 2xx.
                reject(this.statusText);
            }
        };
        client.onerror = function () {
            reject(this.statusText);
        };
    });
}

Prosty przykład użycia:

$http({
    method: 'get',
    url: 'google.com'
}).then(function(response) {
    console.log(response);
}, function(error) {
    console.log(error)
});

Innym rozwiązaniem jest wykonanie kodu za pomocą sekwencyjnego modułu wykonującego nsynjs .

Jeśli funkcja podstawowa jest obiecana

nsynjs oceni kolejno wszystkie obietnice i umieści wynik obietnicy we datawłaściwości:

function synchronousCode() {

    var getURL = function(url) {
        return window.fetch(url).data.text().data;
    };
    
    var url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js';
    console.log('received bytes:',getURL(url).length);
    
};

nsynjs.run(synchronousCode,{},function(){
    console.log('synchronousCode done');
});

<script src="https://rawgit.com/amaksr/nsynjs/master/nsynjs.js"></script>

Jeśli funkcja podstawowa nie jest obiecana

Krok 1. Zawijaj funkcję z wywołaniem zwrotnym do opakowania obsługującego nsynjs (jeśli ma obiecaną wersję, możesz pominąć ten krok):

var ajaxGet = function (ctx,url) {
    var res = {};
    var ex;
    $.ajax(url)
    .done(function (data) {
        res.data = data;
    })
    .fail(function(e) {
        ex = e;
    })
    .always(function() {
        ctx.resume(ex);
    });
    return res;
};
ajaxGet.nsynjsHasCallback = true;