如何改善axios.spread

Question

以下代码根据studentList用于执行多个HTTP调用。

效果很好；但是，我认为轴距传播不是必需的

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。

我让axios，all和axios.spread都可以使用它，但是我认为代码可以改进。

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

有人可以帮忙吗？

Answer 1

由于您仅使用args作为数组，因此可以删除axios.spread。

axios.spread()可能仅在旧版浏览器中有用，因为ES2015引入了自己的spread operator。 axios.spread()的主要目的是将axios.all()的结果扩展到参数列表中，以便您可以执行以下操作：

axios.all(promiseArray).then(axios.spread(function(arg1, arg2, arg3) {
  /*...*/
}))

代替：

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

ES2015的rest operator进行axios.spread()的逆运算，因此，当您将它们组合在一起时（如下所示），最终得到的是上面的结果，就像axios.spread()和 rest 运算符甚至没有被使用：

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]
  /*...*/
}))

Answer 2

Axios.all

以及Promise.all接受诺言数组并返回一个新的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将每个结果分配给这样的变量：

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 Destructuring assignment：

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方法没有影响，因为您没有返回它们

我的实现会是什么

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
}

Answer 3

为了避免promise链接并提高可读性，我认为可以使用以下内容。

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