mit einer fetch-Anweisung innerhalb einer anderen fetch in javascript

Holen die eine Zusage zurückgibt, und Sie können Kette mehrerer verspricht, und verwenden Sie das Ergebnis der 1. Anfrage in die 2. Anfrage:

Verwendet das Beispiel die SpaceX-API, um die Informationen von der neuesten starten, finden die Rakete, die id, und Holen die Rakete info.

JS:

var url = 'https://api.spacexdata.com/v2/launches/latest';

var result = fetch(url, {
    method: 'get',
  }).then(function(response) {
    return response.json(); //pass the data as promise to next then block
  }).then(function(data) {
    var rocketId = data.rocket.rocket_id;

    console.log(rocketId, '\n');
  
    return fetch('https://api.spacexdata.com/v2/rockets/' + rocketId); //make a 2nd request and return a promise
  })
  .then(function(response) {
    return response.json();
  })
  .catch(function(error) {
    console.log('Request failed', error)
  })

//I'm using the result variable to show that you can continue to extend the chain from the returned promise
result.then(function(r) {
  console.log(r); //2nd request result
});

CSS:

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

Dies ist eine häufige Frage, die Leute zu Schaden kommen, indem beim starten mit dem Versprechen, mich eingeschlossen, als ich begann. Aber zuerst...

Es ist großartig, dass Sie versuchen, verwenden Sie die neue Fetch API, aber wenn ich du wäre würde ich die Verwendung eines XMLHttpRequest-Implementierung für jetzt, wie jQuery, AJAX-oder Backbone-die überschriebene Implementierung der jQuery -.ajax(), wenn Sie bereits mit diesen Bibliotheken. Der Grund ist, weil der Fetch API ist noch so neu, und daher experimentell zu diesem Zeitpunkt.

Mit, die sagte, die Leute auf jeden Fall verwenden, aber ich nicht in meinen eigenen Produktions-code, bis es aus dem "experimental" - status.

Wenn Sie sich entscheiden, weiterhin mit fetch gibt es eine polyfill zur Verfügung. HINWEIS: Sie haben zu springen durch zusätzliche Reifen zu bekommen, die Fehlerbehandlung korrekt funktioniert, und um Empfang von cookies vom server. Wenn Sie bereits das laden von jQuery, oder mit Rückgrat, nur stick mit diejenigen, die für jetzt nicht ganz schrecklich, sowieso.

Jetzt auf code:

Du willst ein Wohnung Struktur, was Sie ' re fehlt den Punkt der Verspricht. Es ist nicht klug, nest verspricht, unbedingt, da Verspricht lösen, was geschachtelte async-Callback (Rückruf Hölle) nicht konnte.

Sparen Sie sich Zeit und Energie und produzieren weniger buggy code, indem Sie einfach mit einem besser lesbaren code-Struktur. Es ist nicht alles, aber es ist Teil des Spiels, so zu sprechen.

Verspricht die asynchronen code behalten die meisten der verlorenen Eigenschaften
der synchrone code wie flache Einbuchtung und eine Ausnahme
Kanal.

-- Petka Antonov (Bluebird Versprechen-Bibliothek)

//run async #1
asyncGetFn()
//first 'then' - execute more async code as an arg, or just accept results
//and do some other ops
.then(response => {
    //...operate on response data...or pass data onto next promise, if needed
})
//run async #2
.then(asyncGetAnotherFn)
.then(response => {
    //...operate on response data...or pass data onto next promise, if needed
})
//flat promise chain, followed by 'catch'
//this is sexy error handling for every 'then' above
.catch(err => {  
  console.error('Request failed', err) 
  //...raise exeption...
  //... or, retry promise... 
})