当我使用Promise.all进行多次调用（大约12次）时，一些API调用失败。

Question

我想进行多次API调用，调用次数为12次，我使用Promise.all方法，但问题是有些调用失败了，失败次数不固定，有时是4次，有时是2次或6次，但当我使用只进行5次调用时，它可以正常工作。下面是我的代码。

const getReturnData = async (item) => {
        const res = await axios.get(`${BASE_URLS.signupBaseUrl}/mutual-funds/nav/${item}`)
        return res;
    }

    const sample = ['call1', 'call2', 'call3', 'call4', 'call5', 'call6', 'call7', 'call8', 'call9', 'call10', 'call11', 'call12']

    useEffect(() => {
        let promises = sample.map(item => {return getReturnData(item)})

        axios.all(promises).then(values => {
            setReturnData(values.map(item => item));
        }).catch(err => {
            setReturnData([])
            throw err
        })
    },[])

Answer 1

这是因为Promise.all()在迭代promise对象的过程中，如果出现了reject()调用，就会失败。

下面是一个简单的例子

var p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("p1");
  }, 100);
});
var p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("p2");
  }, 100);
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("p3");
  }, 100);
}); 

Promise.all([p1, p2, p3]).then(response=> { 
  console.log("Success", response);
}).catch(err => {
    console.log("Fail", err);
})

上面的控制台日志会是 "Fail, p1"，因为在Promise对象中存在一个异常。

所以，你需要单独捕获API调用的异常，以便进行所有的API请求。

const getReturnData = (item) => {
      return axios.get(`${BASE_URLS.signupBaseUrl}/mutual-funds/nav/${item}`).then(response => { return response; }).catch(err => { //handle error here });
}

...

Answer 2

我不习惯使用async-await，但这应该是可行的。

 const sample = ['call1', 'call2', 'call3', 'call4', 'call5', 'call6', 'call7', 'call8', 'call9', 'call10', 'call11', 'call12']

  useEffect(() => {
    let promises = sample.map(item => {
      return new Promise((resolve, reject) => {
        try {
          const res = axios.get(`${BASE_URLS.signupBaseUrl}/mutual-funds/nav/${item}`)
          resolve(res)
        } catch (err) {
          reject(err);
        }
      })

    })

    Promise.all(promises).then(values => {
      setReturnData(values.map(item => item));
    }).catch(err => {
      setReturnData([])
      throw err
    })
  }, [])