2
votes

Comment améliorer le axios.spread

Le code ci-dessous que j'utilise pour effectuer plusieurs appels HTTP en fonction de la studentList .

Cela fonctionne bien; cependant, je pense que la diffusion axios n'est pas nécessaire

export default {

      getFee (studentList: { studentId: string }[]) {

        if (studentList.length < 1) {
          Promise.resolve()
        }
        let promises = []
        for (const student of studentList) {
          if (!student.studentId) {
            Promise.resolve()
          }
          var url = `${API_URL}/${student.studentId}`

          promises.push(Axios.get(url))
        }

        return Axios.all(promises)
          .then(Axios.spread((...args) => {
            // customise the response here
            return args
              .map(response => response.data)
              .map(data => {
                // @ts-ignore
                data.totalMark = data.markinPhysics + data.markinMaths + data.markinChemistry // total mark  sum of marks in differnet discplines
                return data
              })
          }))
          .catch(error => {
            switch (error.response.status) {
              case 400:
                console.log('student not found')
                break
              case 500:
                console.log('error invoking')

                break
              default:
                console.log('unknown error')

Je dois faire plusieurs appels réseau dans Vue et j'utilise Axios.

Je l'ai compris fonctionnant par axios, all et axios.spread, mais je pense que le code peut être amélioré.

La logique est de faire plusieurs appels pour la liste des étudiants et de récupérer les sorties

Peut quelqu'un aide?

axios vuejs2

0 commentaires

3 Réponses :

2
votes

Comme vous n'utilisez que des args comme tableau, vous pouvez supprimer axios.spread.

axios.spread () pourrait seulement être utile dans les navigateurs plus anciens maintenant que ES2015 a introduit son propre opérateur de diffusion . Le principal objectif de axios.spread () est d'étendre le résultat de axios.all () dans une liste d'arguments, comme vous pouvez le faire:

XXX

au lieu de:

axios.all(promiseArray).then(axios.spread(function(...args) {
  var arg1 = args[0]
  var arg2 = args[1]
  var arg3 = args[2]
  /*...*/
}))

// or newer syntax:

axios.all(promiseArray).then(axios.spread((...args) => {
  const arg1 = args[0]
  const arg2 = args[1]
  const arg3 = args[2]
  /*...*/
}))

ES2015 reste l'opérateur fait l'inverse de axios.spread () , donc quand vous combinez-les (comme vu ci-dessous), vous vous retrouvez avec le résultat ci-dessus, comme si axios.spread () et l'opérateur rest n'étaient même pas utilisés: p >

axios.all(promiseArray).then(function(args) {
  var arg1 = args[0]
  var arg2 = args[1]
  var arg3 = args[2]
  /*...*/
})

1 commentaires

Oui, c'est le deuxième extrait ci-dessus: axios.all (promiseArray) .then (args => /*...*/)

1
votes

Pour éviter le chaînage des promesses et améliorer la lisibilité, je pense que ci-dessous peut être utilisé.

const [arg1, arg2] = await Promise.all(promises)

0 commentaires

2
votes

Axios.all

ainsi que Promise.all accepte un tableau de promesses et renvoie une nouvelle promesse qui est résolue chaque fois que toutes les promesses données sont résolues avec un tableau avec le résultat de chaque promesse

par exemple

async function getFee(studentList) {
  try {
    const promises = studentList.reduce((acc, student) =>
      student.studentId
        ? acc.concat(Axios.get(`${API_URL}/${student.studentId}`))
        : acc
    , []);

    const responses = await Axios.all(promises);

    return responses
      .map(response => response.data)
      .map(data => ({
        // return new object
        // with data's properties
        // instead of assinging the new ones directly to the data
        ...data,
        // total mark  sum of marks in differnet discplines
        totalMark: data.markinPhysics + data.markinMaths + data.markinChemistry,
      }));
  } catch (error) {
    switch (error.response.status) {
      case 400:
        console.log("student not found");
        break;
      case 500:
        console.log("error invoking");
        break;
      default:
        console.log("unknown error");
    }
  }
}

export default {
  getFee
}

vous pouvez utiliser Axios.spread pour affecter chaque résultat à une variable comme celle-ci:

Promise.all([
  promise1,
  promise2,
]).then(([ result1, result2 ]) => {
  // args is an array with 2 elements
  console.log(result1); // data1
  console.log(result2); // data2
});

vous pouvez également utiliser ES6 Destructuring assignation :

Promise.all([
  promise1,
  promise2,
]).then(Axios.spread(( result1, result2 ) => {
  // args is an array with 2 elements
  console.log(result1); // data1
  console.log(result2); // data2
});

Promise.resolve () inutile

Vos appels de fonction Promise.resolve () n'ont aucun effet sur la méthode getFee puisque vous ne les renvoyez pas

Quelle serait ma mise en œuvre

const promise1 = Promise.resolve('data1');
const promise2 = Promise.resolve('data2');

Promise.all([
  promise1,
  promise2,
]).then(results => {
  // results is an array with 2 elements
  console.log(results[0]); // data1
  console.log(results[1]); // data2
});

0 commentaires