Question

我正在使用axios.all()解决不确定数量的不同请求。假设在此示例中，呼叫次数为3。

对于所有这些请求，我需要在axios的params中修改一个值，以针对每个请求从api检索不同的页面：

params: { page: 1 } // request 1
params: { page: 2 } // request 2
params: { page: 3 } // request 3

问题是axios请求page: 3 3次，好像它坚持了为承诺提供的最后requestConfig。

这是我的代码：

function request(requestConfig) {
  // ... axios config such as baseURL, api authentication, etc.

  // [TEST A] - correct page # param
  console.log(requestConfig)

  return axios(requestConfig)
    .then ( res => {
      // [TEST B] - incorrect page # param, always last page
      console.log(requestConfig)
      return res.data
    })
    .catch( error => {
      // error
    })
}


export default {
  // ... other axios request functions
  getProjects () {
    return new Promise( (resolve, reject) => {
      let projects = []
      let promises = []

      // loop through all project pages (3 for this example)
      for (let i = 1; i <= 3; i++) {
        promises.push(request({ url: 'projects', params: {
          page: i // set the page number for this request
        }))
      }

      axios.all(promises)
        .then( results => {
          // loop through the results and push them to projects[]
          results.forEach( page => {
            projects.push.apply(projects, page)
          })

          resolve(projects)
        })
        .catch( error => {
          reject(error)
        })
    }
  }
}

奇数部分是[TEST A]处的，输出正确的参数页码。对于[TEST B]，它输出所有请求的最后页码。

我找到了这些，但是不是同一个问题，或者我没有关注...

Why I getting the last promise?

Is it possible to use axios.all with a then() for each promise?

有什么想法吗？

Answer 1

我将第一个功能更改为：

function request(requestConfig) {
  // ... axios config such as baseURL, api authentication, etc.

  // [TEST A] - correct page # param
  console.log(requestConfig)

  // ADDED THIS TO CREATE A NEW AXIOS INSTANCE EVERY TIME
  let axiosInstance = axios.create(requestConfig)

  return axiosInstance(requestConfig)
    .then ( res => {
      // [TEST B] - incorrect page # param, always last page
      console.log(requestConfig)
      return res.data
    })
    .catch( error => {
      // error
    })
}

不确定这是否是执行此操作最有效的方法，但它可以达到最终目的...

axios.all（）使用上一个请求配置

1 个答案: