zurück AJAX in AJAX Anruf

Question

Ich möchte den zweiten Ajaxcall als Ergebnis der Ajax-Funktion zurückgeben, kann mir jemand helfen.

private ajax(url: string, method:string, data:any = null) { 
    var _this = this; 
    return this.csrfWithoutDone().done(function (res) { 
     $.ajaxSetup({ 
     headers: { 
      'X-CSRF-TOKEN': res 
     } 
     }); 
     return $.ajax({ 
     url: _this.baseUrl + url, 
     type: method, 
     data: data, 
     }); 
    }); 
    } 

die csrfWithoutDone Funktion:

return $.ajax({ 
     url: _this.baseUrl + '/api/csrf', 
     type: 'GET' 
    }); 

BTW: dies ist in Typoskript writen aber wenn Sie mit Funktion privat ersetzen und entfernen Sie den: (Typ) funktioniert es auch in js.

Answer 1

Was Sie tun sollten, ist die Anrufe zu ketten.

Die Funktion .done() ist asynchron. Daher wird es ausgeführt, was auch immer Sie es als ein Argument übergeben, wenn die Antwort zurück ist. Der zurückgegebene Wert dieser Funktion geht nirgendwohin.

Was sollten Sie tun, stattdessen ist: foo.then (function() {/ * Schritt 1 /}) dann (function ({/ Schritt 2 * /})

Ich würde Lesung vor. . ein wenig über asynchrounousity in Javascript

Dies ist die Art und Weise ist, dass Sie es mit dem Versprechen tun würde, habe ich nie gearbeitet mit jQuery so könnte die Syntax unterscheiden

bearbeiten. ich möchte hinzufügen, dass es keine Möglichkeit gibt, gib den Antwortwert in deiner Initialfunktion zurück, das Beste, was du tun kannst, ist das jqXHR-Objekt zurückzugeben, Und dann rufe das "then()" oder "done()" vom Anrufer auf.

Answer 2

Sie sollten ein Promised Objekt in Ihrer ajax Funktion zurückgeben, um herauszufinden, ob Ihre Anfrage erledigt ist oder nicht. Da Sie jQuery verwenden, können Sie Deferred Objects verwenden:

function ajax(url, method, data) { 
    var _this = this; 

    // Create a deferred object 
    var dfd = $.Deferred(); 

    this.csrfWithoutDone().done(function (res) { 
     $.ajaxSetup({ 
      headers: { 
       'X-CSRF-TOKEN': res 
      } 
     }); 

     $.ajax({ 
      url: _this.baseUrl + url, 
      type: method, 
      data: data, 
     }).done(function (response) { 
      // your inner ajax has been done 
      // tell your promised object and pass the response to it 
      dfd.resolve(response); 
     }); 
    }); 

    // return promised 
    return dfd.promise(); 
} 

// call your ajax function, it is a promised object 
var ajaxRequest = ajax(); 

// so you can wait for the response 
ajaxRequest.done(function (response) { 
    // your ajax has been done and you have the response 
    console.log(response); 
}); 

---

ich einen einfachen Code implementiert haben, um herauszufinden, wie Promised Objekt funktioniert:

function ajax() { 
 
    var dfd = $.Deferred(); 
 
    
 
    setTimeout(function() { 
 
     dfd.resolve('Hello World'); 
 
    }, 1000); 
 
    
 
    return dfd.promise(); 
 
} 
 

 
var testResult = ajax(); 
 

 
testResult.done(function (response) { 
 
    alert(response); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Sie können auch native Promise Object verwenden, und vielleicht benötigen Sie Polyfill, um alle Browser zu unterstützen, siehe Can I Use.