[英]Dynamic, multiple API calls using axios
我正在尝试从 API 服务器获取数据。
async function fetchData() {
const results = await axios(`/api/autotask/config-items/${props.accountID}`);
const contracts = results.data.map(t => axios(`/api/autotask/contract/${t.contractID}`).catch(err => err))
const products = results.data.map(l => axios(`/api/autotask/product/${l.productID}`).catch(err => err))
const subscriptions = results.data.map(s => axios(`/api/autotask/subscription/${s.id}`).catch(err => err))
Promise.all([[...contracts], [...products], [...subscriptions]])
.then(response => {
console.log(response)
})
}
这将首先根据 accountID 获取项目列表。 每个项目都有contractID、productID 和id。 这些被传递给其他 3 个 Axios GET 调用(合同、产品、订阅)
到目前为止,这是可行的,但是当我使用Promise.all
时,我将获得 3 个 arrays,其中包含更多的承诺,而不是实际解析的数据。
(3) [Array(7), Array(7), Array(7)]
0: (7) [Promise, Promise, Promise, Promise, Promise, Promise, Promise]
0: Promise {<fulfilled>: {…}}
1: Promise {<pending>}
2: Promise {<pending>}
3: Promise {<pending>}
4: Promise {<fulfilled>: {…}}
5: Promise {<pending>}
6: Promise {<pending>}
length: 7
__proto__: Array(0)
1: (7) [Promise, Promise, Promise, Promise, Promise, Promise, Promise]
2: (7) [Promise, Promise, Promise, Promise, Promise, Promise, Promise]
length: 3
__proto__: Array(0)
有了这个,我可以访问 response[0]、response[1] 或 response[2],但它会再次获得承诺。 当我试图传播每个数组Promise.all([**...[...contracts]**, [...products], [...subscriptions]])
它会传播它,我得到数据但将不再能够通过数组访问它。 希望这是有道理的。 基本上我想要摆脱的是包含来自 API 的数据的单个 arrays。 过去 2 天我一直在寻找这个,但我哪儿也不去。 我看过很多视频和文章,但仍然没有多大意义。 我确信我做错了什么,甚至可能采取了完全错误的方法。 获得一些见解和一点帮助会很棒。 谢谢
我们可以在这里使用 await 以及 Promise.all 来处理每个项目,例如合同、产品、订阅,使用一点解构来从每个响应中提取数据属性。
当我们这样做时,我们将获得每个项目类型的 axios 响应列表,因此我们只需要挑选数据。
async function fetchData() {
try {
const results = await axios(`/api/autotask/config-items/${props.accountID}`);
// This will get a list of axios responses for each item, e.g. { data: [1,2,3] .... }; Use { data } => destructing to get data.
const contracts = await Promise.all(results.data.map(t => axios(`/api/autotask/contract/${t.contractID}`).then( ({data}) => data) ));
const products = await Promise.all(results.data.map(l => axios(`/api/autotask/product/${l.productID}`).then( ({data}) => data) ));
const subscriptions = await Promise.all(results.data.map(s => axios(`/api/autotask/subscription/${s.id}`).then( ({data}) => data) ));
console.log("Result:", { contracts, products, subscriptions } );
} catch (error) {
// We need to make sure we log any error..
console.log("fetchData: an error occurred:", error);
}
}
还有一个片段(使用模拟数据):
// Mock out axios for demo purposes async function axios(input) { if (input.includes('config-items')) { return { data: [1,2,3,4,5].map(n => { return { id: n, contractID: n, productID: n }}) }; } else { return { data: { type: input.split("/")[3] } }; } } let props = { accountID: 'accountID' }; async function fetchData() { try { const results = await axios(`/api/autotask/config-items/${props.accountID}`); // This will get a list of axios responses for each item, eg { data: [1,2,3].... }; const contracts = await Promise.all(results.data.map(t => axios(`/api/autotask/contract/${t.contractID}`).then( ({data}) => data) )); const products = await Promise.all(results.data.map(l => axios(`/api/autotask/product/${l.productID}`).then( ({data}) => data) )); const subscriptions = await Promise.all(results.data.map(s => axios(`/api/autotask/subscription/${s.id}`).then( ({data}) => data) )); console.log("Result:", { contracts, products, subscriptions } ); } catch (error) { // We need to make sure we log any error.. console.log("fetchData: an error occurred:", error); } } fetchData();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.