首页 > 解决方案 > 使用 Axios 返回具有多个响应的数组

问题描述

我有一个函数可以获取一些股票的汇率:

export const getRates = (symbole1, symbole2, symbole3) => {
    
    const res = []

    axios.all([
        axios.get(`${baseUrl}/${symbole1}`),
        axios.get(`${baseUrl}/${symbole2}`),
        axios.get(`${baseUrl}/${symbole3}`)
    ])
        .then(axios.spread((data1, data2, data3) => {

            res.push(data1.data)
            res.push(data2.data)
            res.push(data3.data)
             return res
    }))
        .catch(
            err => console.log(err)
        )
}

在另一个文件中,我使用如下函数:

useEffect(() => {
        getRates('IBM', 'AAPL', 'MSFT')
            .then(res => {
                console.log(res)
                setStock(res)
            })
            .catch(err => {
                console.log(err)
            })
    }, [])

但是,这不起作用,因为第二个文件会引发此错误:

TypeError:无法读取未定义的属性“then”

这里有什么问题?你不能这样返回结果吗?还是有其他问题?

谢谢

标签: javascriptreactjsaxios

解决方案


您收到错误是因为您要求解决承诺,但只返回一个常规值。您可以设置另一个承诺以正确返回您then会理解的内容 - 或者 - 您可以只返回承诺......

export const getRates = (symbole1, symbole2, symbole3) => {
  return axios.all([
    axios.get(`${baseUrl}/${symbole1}`),
    axios.get(`${baseUrl}/${symbole2}`),
    axios.get(`${baseUrl}/${symbole3}`)
  ])

}

useEffect(() => {
  const res = []
  getRates('IBM', 'AAPL', 'MSFT')
    .then(axios.spread((data1, data2, data3) => {
      res.push(data1.data)
      res.push(data2.data)
      res.push(data3.data)
      console.log(res)
      setStock(res)
    }))
    .catch(
      err => console.log(err)
    )

}, [])

推荐阅读