web-dev-qa-db-fra.com

Promesse Tout avec Axios

Je viens de lire un article lié à promise et j'étais incapable de comprendre comment nous pouvons le faire plusieurs appels d'API à l'aide d'Axios via Promise.all  

Alors considérez qu'il y a 3 URL, appelons-le comme ceci 

let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com
let URL3 = "https://www.something2.com"

Et un tableau dans lequel nous allons stocker Value 

  let promiseArray = []

Maintenant, je veux exécuter ceci en parallèle (Promise.all), mais je ne peux pas comprendre comment nous allons le faire. Parce qu'axios a une promesse en soi (ou du moins c'est comme ça que je l'ai utilisée).

axios.get(URL).then((response) => {
}).catch((error) => {
})

Question: Quelqu'un peut-il me dire comment nous pouvons envoyer plusieurs demandes en utilisant promise.all et axios

javascriptpromiseaxios
5
anny123

La méthode axios.get() renverra une promesse.

Promise.all() nécessite un tableau de promesses. Par exemple:

Promise.all([promise1, promise2, promise3])

Eh bien...

let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com
let URL3 = "https://www.something2.com"

const promise1 = axios.get(URL1);
const promise2 = axios.get(URL2);
const promise3 = axios.get(URL3);

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});

Vous vous demandez peut-être à quoi ressemble la valeur de réponse de Promise.all(). Eh bien, vous pouvez facilement le découvrir vous-même en jetant un coup d’œil à cet exemple:

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

Pour plus d'informations: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

6
Nguyen You

Nous avons défini une fonction (getData) pour appeler l'API et renvoie une promesse. 

Dans Function (getAllData), URLPromises contient le tableau de promesses renvoyées par la fonction getData à chaque appel.

Ici, nous attendons que toutes les promesses soient résolues de manière asynchrone {API respose}.

await Promise.all(URLPromises);

La réponse du code ci-dessus contiendra un tableau de réponses provenant de l'API Call.

let URLs= ["https://www.something.com", "https://www.something2.com", "https://www.something3.com"]

async function getAllData(URLs){
  let URLPromises = URLs.map((URL)=>{
   return getData(URL);
  })
  let response = await Promise.all(URLPromises);
  console.log(response)
}

function getData(URL) {
  return axios
    .get(URL)
    .then(function(response) {
      console.log(response.data);
      return {
        success: false,
        data: response.data
      };
    })
    .catch(function(error) {
      console.log(error);
      return { success: false };
    });
}

2
Mohammed Ashfaq

Vous pouvez toujours utiliser promise.all avec un tableau de promesses qui lui sont transmises, puis attendez que toutes soient résolues ou l'une d'elles soit rejetée.

let URL1 = "https://www.something.com";
let URL2 = "https://www.something1.com";
let URL3 = "https://www.something2.com";


const fetchURL = (url) => axios.get(url);

const promiseArray = [URL1, URL2, URL3].map(fetchURL);

Promise.all(promiseArray)
.then((data) => {
  data[0]; // first promise resolved 
  data[1];// second promise resolved 
})
.catch((err) => {
});

1
Tareq

Juste pour ajouter à la réponse approuvée, axios a aussi son of Promise.all sous la forme axios.all; il attend une liste de promesses et renvoie un tableau de réponses.

let randomPromise = Promise.resolve(200);
axios.all([
    axios.get('http://some_url'),
    axios.get('http://another_url'),
    randomPromise
  ])
  .then((responses)=>{
    console.log(responses)
  })
0
Tiisetso Tjabane

Quelque chose comme ça devrait marcher:

const axios = require('axios');
function makeRequestsFromArray(arr) {
    let index = 0;
    function request() {
        return axios.get('http://localhost:3000/api/' + index).then(() => {
            index++;
            if (index >= arr.length) {
                return 'done'
            }
            return request();
        });

    }
    return request();
}

makeRequestsFromArray([0, 1, 2]);
0
sol404