如何改进 axios.spread [英] How to Improve The axios.spread

问题描述

下面的代码用于根据 studentList 进行多个 HTTP 调用.

The below code i use for doing multiple HTTP calls depending on the studentList.

效果很好；但是，我认为 axios 传播是没有必要的

It works well; however, I think the axios spread is not necessary

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')

我必须在 Vue 中进行多次网络调用，而我正在使用 Axios.

I have to do multiple network calls in Vue and I am using Axios.

我通过 axios、all 和 axios.spread 让它工作，但我认为代码可以改进.

I got it working by axios, all and axios.spread, but I think the code can be improved.

逻辑是对学生列表进行多次调用并取回输出

The logic is to do multiple calls for the student list and get the outputs back

有人可以帮忙吗?

推荐答案

Axios.all

以及Promise.all 接受承诺数组并返回一个新的承诺，只要所有给定的承诺都用一个包含每个承诺结果的数组解决

Axios.all

as well as Promise.all accepts array of promises and returns a new Promise which is resolved whenever all of the given promises are resolved with an array with the result of each promise

例如

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
});

您可以使用 Axios.spread 将每个结果分配给一个变量，如下所示:

you can use Axios.spread to to assign each result to a variable like this:

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

或者，您可以使用 ES6 解构赋值:

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

不必要的 Promise.resolve()

您的 Promise.resolve() 函数调用对 getFee 方法没有影响，因为您没有返回它们

Unnecessary Promise.resolve()

Your Promise.resolve() function calls have no effect on the getFee method since you're not returning them

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
}

这篇关于如何改进 axios.spread的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！