javascript - 它作为组合值传递 4,5,6
问题描述
- 我是新来的承诺。
- 我需要进行两个不同的 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 });
});
});
}}
/>
解决方案
我发现了你的问题。这是因为您没有处理承诺的结果。为此,只需添加.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>);
推荐阅读
- linux - bash cURL POST 不起作用?
- postgresql - 如何更改其他语言 PostgreSQL 中的时间戳格式
- java - TableView 成功填充,但多次查询后发生 NPE - JavaFX
- tableau-api - 在 Tableau 中提取两个单词之间的单词
- java - QueryDSL + SpringData + JPA:过滤器不适用于内部实体
- javascript - 修复 div 时防止动画跳转
- node.js - Nodemailer - 收件人地址被拒绝:超出配额
- django - Django 正在应用背景颜色,但不应用 style.css 中的背景图像
- microsoft-graph-api - Microsoft Outlook Rest API 使用正文元素推送丰富的通知
- android - 我怎样才能让片段中的蓝牙连接保持活跃?