web-dev-qa-db-fra.com

en utilisant un chercher dans un autre chercher en javascript

Je veux avoir une api et ensuite appeler une autre. Utilisez-vous judicieusement un code comme celui-ci en javascript?

fetch(url, {
 method: 'get',
 }).then(function(response) {  
  response.json().then(function(data) {  
    fetch(anotherUrl).then(function(response) {
      return response.json();
    }).catch(function() {
      console.log("Booo");
    });
  });  
}) 
.catch(function(error) {  
  console.log('Request failed', error)  
});
javascriptfetch-api
28
Monala92

Fetch renvoie une promesse, et vous pouvez chaîner plusieurs promesses , et utiliser le résultat de la 1ère requête dans la 2ème requête:

L'exemple utilise SpaceX API pour obtenir les informations sur le dernier lancement, trouver l'ID de la fusée et extraire ses informations.

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
});
.as-console-wrapper { max-height: 100% !important; top: 0; }
45
Ori Drori

Il n'y a pas de problème avec les appels imbriqués fetch(). Cela dépend de ce que vous essayez d'accomplir en imbriquant les appels.

Vous pouvez également utiliser .then() pour chaîner les appels. Voir aussi Comment structurer les promesses imbriquées

fetch(url)
.then(function(response) { 
  return response.json()
})
.then(function(data) {   
  // do stuff with `data`, call second `fetch`
  return fetch(data.anotherUrl)
})
.then(function(response) { 
  return response.json(); 
})
.then(function(data) {
  // do stuff with `data`
})
.catch(function(error) { 
  console.log('Requestfailed', error) 
});
15
guest271314

Il s’agit d’une question commune à laquelle les gens se font prendre lorsqu’ils commencent par Promises, moi-même inclus quand j’ai commencé. Cependant, d'abord ...

C'est bien que vous essayiez d'utiliser la nouvelle Fetch API , mais si j'étais vous, j'utiliserais pour l'instant une implémentation XMLHttpRequest, comme jQuery AJAX ou l'implémentation surchargée de Backbone de .ajax() de jQuery, si vous utilisez déjà ces bibliothèques, car l’API Fetch est encore si nouvelle et, par conséquent, expérimentale à ce stade.

Cela dit, les gens l'utilisent vraiment, mais je ne le ferai pas dans mon propre code de production tant que ce n'est pas en statut "expérimental".

Si vous décidez de continuer à utiliser fetch, il existe un polyfill . REMARQUE: vous devez parcourir des étapes supplémentaires pour que la gestion des erreurs fonctionne correctement et pour recevoir les cookies du serveur. Si vous chargez déjà jQuery ou utilisez Backbone, restez-en à ceux-là pour le moment. pas complètement affreux, en tout cas.

Maintenant sur le code:

Vous voulez une structure plate , sinon vous manquez le point de Promises. Il n'est pas judicieux d'imbriquer des promesses, forcément, car elles résolvent ce que les rappels asynchrones imbriqués (enfer de rappel) ne pourraient pas.

Vous économiserez temps et énergie et produirez moins de code en utilisant simplement une structure de code plus lisible. Ce n'est pas tout, mais ça fait partie du jeu, pour ainsi dire.

Les promesses consistent à faire en sorte que le code asynchrone conserve la plupart des propriétés perdues du code synchrone, telles que l'indentation à plat et un canal d'exception.

- Petka Antonov (bibliothèque Bluebird Promise)

// 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... 
})
4
jeremiah.trein