javascript - 它作为组合值传递 4,5,6

Question

• 我是新手。
• 我需要调用两个不同的 API。
• 根据第一次 api 调用的结果，我在变量 firstAPIid 中获取了 id， https://reqres.in/api/users?page=2
• 我需要将此 ID firstAPIid 传递给第二个 api 调用。
• 但问题是它作为组合值传递 4,5,6 https://jsonplaceholder.typicode.com/comments?postId=4,5,6
• 我需要从第二个 api 调用中检索电子邮件并将其显示在浏览器中。
• 我是否需要使用 promise 或 async 或 redux 本身才能实现。

• 我研究并引用了以下链接，但仍然没有成功 https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8

• 你能告诉我如何修复它吗？

• 在下面提供我的代码片段和沙箱

https://codesandbox.io/s/redux-async-actions-xjdo7

<FetchButton
          onFetchClick={() => {
            store.dispatch(dispatchFunc => {
              dispatchFunc({ type: "FETCH_DATA_START" });
              axios
                .get("https://reqres.in/api/users?page=2")
                // axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(response => {
                  console.log("response.data.data---->", response.data.data);
                  console.log(
                    "response.data.data[0].id---->",
                    response.data.data[0].id
                  );
                  dispatchFunc({
                    type: "RECEIVED_DATA",
                    payload: response.data.data
                  });

                  let firstAPIid = response.data.data.map(obj => {
                    return obj.id;
                  });
                  console.log("firstAPIid---->", firstAPIid);

                  return new Promise((resolve, reject) => {
                    //var url = `https://jsonplaceholder.typicode.com/comments?postId=3`;
                    var url =
                      `https://jsonplaceholder.typicode.com/comments?postId=` +
                      firstAPIid;
                    //response.data.data[0].id;

                    console.log("second url---->", url);

                    axios
                      .get(url)
                      .then(response => {
                        var lFilterData = "";
                        //memberGroupingHelper.filterData(response.data, additionalParams);
                        resolve(lFilterData);
                      })
                      .catch(error => {
                        if (error.response) {
                          console.log(
                            `@@@@@@@@@@@@@@ service error from helpeeeeeer reject`
                          );
                        }
                        reject("");
                      });
                  });
                })
                .catch(err => {
                  dispatchFunc({ type: "FETCH_DATA_ERROR", payload: err });
                });
            });
          }}
        />

Answer 1

我发现了你的问题。它正在发生，因为您没有处理 promise 的结果。为此，只需添加 .then() 和 .catch() 函数:

<FetchButton
          onFetchClick={() => {
            store.dispatch(dispatchFunc => {
              dispatchFunc({ type: "FETCH_DATA_START" });
              axios
                .get("https://reqres.in/api/users?page=2")
                // axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(response => {
                  console.log("response.data.data---->", response.data.data);
                  console.log(
                    "response.data.data[0].id---->",
                    response.data.data[0].id
                  );
                  dispatchFunc({
                    type: "RECEIVED_DATA",
                    payload: response.data.data
                  });

                  let firstAPIid = response.data.data.map(obj => {
                    return obj.id;
                  });
                  console.log("firstAPIid---->", firstAPIid);

                  return new Promise((resolve, reject) => {
                    //var url = `https://jsonplaceholder.typicode.com/comments?postId=3`;
                    var url =
                      `https://jsonplaceholder.typicode.com/comments?postId=` +
                      firstAPIid;
                    //response.data.data[0].id;

                    console.log("second url---->", url);

                    axios
                      .get(url)
                      .then(response => {
                        var lFilterData = "";
                        //memberGroupingHelper.filterData(response.data, additionalParams);
                        resolve(lFilterData);
                      })
                      .catch(error => {
                        if (error.response) {
                          console.log(
                            `@@@@@@@@@@@@@@ service error from helpeeeeeer reject`
                          );
                        }
                        reject("");
                      });
                  }).then((previousResponse) => {
                    //Here you resolved the promise with the resolve value above
                    console.log(previousResponse)
                  }).catch((error) => {
                    //Here you resolved the promise with the reject value above
                    console.log(error);
                  });
                })
                .catch(err => {
                  dispatchFunc({ type: "FETCH_DATA_ERROR", payload: err });
                });
            });
          }}
        />

我没有看到对 Promise 的任何使用，因为您想要实现的目标只需使用 axios 即可完成。

编辑:只需使用 axios 即可。修改如下:

<FetchButton
        onFetchClick={() => {
            store.dispatch(dispatchFunc => {
              dispatchFunc({ type: "FETCH_DATA_START" });
              axios
                .get("https://reqres.in/api/users?page=2")
                // axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(response => {
                  console.log("response.data.data---->", response.data.data);
                  console.log(
                    "response.data.data[0].id---->",
                    response.data.data[0].id
                  );
                  //First of all we'll create the number of requestes base on the previous Response
                  const promises = response.data.data.reduce((previousValue, { id }) => { 
                    previousValue.push(axios.get(`https://jsonplaceholder.typicode.com/comments?postId=${id}`));
                    return previousValue;
                  },[]);
                  //We use the built in function to fetch the data
                  axios.all(promises)
                    .then((responses) => {
                      //Here you have all responses processed
                      const emailsMapped = responses.reduce((previousValue, { data }) => {
                        const emails = data.map(({ email }) => email)
                        previousValue.push(...emails);
                        return previousValue;
                      }, [])
                      //You send the emails you want  
                      dispatchFunc({
                          type: "RECEIVED_DATA",
                          payload: emailsMapped
                        });
                      console.log(emailsMapped);
                    })
                })
                .catch(err => {
                  dispatchFunc({ type: "FETCH_DATA_ERROR", payload: err }); 
                });
            }); 
          }}
        />

还修改了 DataList 中没有 first_name

的这一行

listItems.push(<div key={fetchedDataId++}>{elem}</div>);