如何执行两个 Axios GET 请求，映射结果然后将其推送到数组？

Posted 2023-02-16

【中文标题】如何执行两个 Axios GET 请求，映射结果然后将其推送到数组？

【英文标题】：How can I do two Axios GET requests, map the result and then pushing that to an array?

【发布时间】：2022-01-22 12:26:13

【问题描述】：

我很难理解 Promise，在这种情况下是使用 Axios。我一直在阅读它并无休止地搜索***，但仍然无法理解它。

首先，我正在尝试获取练习列表，结果中有一个 ID（称为练习库）。我想使用该 ID 发出另一个 GET 请求以接收该练习的图像。

然后，我将名称、id 和图像作为对象推送到数组中。它可以完美地获取练习列表并将其推送到数组中，但是在尝试获取图像时，我似乎无法正常工作。

在我的对象中，我想传递从我的 getImages 承诺中收到的 imageUrl。我怎样才能做到这一点？

function getImages(exercise_base) 
  return axios.get("https://wger.de/api/v2/exerciseimage/?exercise_base=" + exercise_base);


const fetchData = async () => 
  const result = await axios(getFetchUrl());
  const array = [];
  // mapping through all the exercises, getting the exercise_base id which i then pass my getImages function
  result.data.results.map((
    name,
    id,
    category,
    description,
    exercise_base
  , e, index) => 
    getImages(exercise_base).then((e) => 
      // I want to pass this as imageUrl: in my object
      console.log(e.data.results[0].image);
    );
    array.push(
      value: name,
      description: "description",
      category: category,
      key: id,
      imageUrl: "" // Here I want to pass my imageUrl that I get from my getImages promise.
    );
  );
;

【参考方案1】：

创建一个当所有内部 promise 使用 Promise.all() 解析时解析的单个 promise。每个内部promise的解析都可以是完全水合的对象

const EXERCISE_IMAGE_URL = "https://wger.de/api/v2/exerciseimage/"

const getMainImage = async (exercise_base) => 
  const  data:  results   = await axios.get(EXERCISE_IMAGE_URL, 
    params:  exercise_base  // using params is safer
  )

  // resolve with the first _main_ image (or undefined if none)
  return results.find(( is_main ) => is_main)?.image


const fetchData = async () => 
  const  data:  results   = await axios(getFetchUrl());

  // map each result to a new promise that resolves with the full object
  return Promise.all(results.map(async (
    name,
    id,
    category,
    description,
    exercise_base
  ) => (
    value: name,
    description,
    category,
    key: id,
    imageUrl: await getMainImage(exercise_base)
  )))

【讨论】：

我开始回答这个问题，但后来看到你已经写了一个。以下是我开始的一些推断类型，如果它可能有帮助：tsplay.dev/mMVErW

感谢您抽出宝贵时间回答！这非常漂亮，难怪我自己不能做出决定，哈哈。因此，当 Promise 使用完整对象解析时，我将其推送到我假设的数组中。我正在使用 React Native，所以当所有的承诺都已经解决并且我的数组完成时，我想将我的状态设置为那个数组。之前，我会在 fetchData 函数的末尾设置状态。现在该代码由于返回而无法访问。解决所有承诺后，我在哪里可以调用此代码？

我想我是经过反复试验才知道的。如果我错了，请纠正我，但我添加了 fetchData().then((value) => setTestData(value); setIsLoading(false); );当 promise 被解决时，这会设置我的 setTestData 状态。

@victorgson 完全正确！