我将一堆 axios get 请求链接到一个 API 的不同端点，我正在尝试从数据(简化)创建一个这样的数组:
[
{
name: "John",
id: 1,
gender: "male"
},
{
name: "Anna",
id: 2,
gender: "female"
},
]
在其中一个请求中，我在一个数组中检索每个人的姓名和 ID，如下所示:
[
{
name: "John",
id: 1
},
{
name: "Anna",
id: 2
},
]
现在我只需要通过在两个单独的请求中将每个人的 ID 发送到端点来获取他们的性别。
我花了几个小时试图用 push() 和 then() 在顶部构造数组，但我就是做不好。
我该怎么做？
顺便说一句，我正在像这样链接 axios 请求:
axios.get('api/' + endpoint1]).then(response => {
axios.get('api/' + endpoint2).then(response => {
axios.get('api/' + endpoint3).then(response => {
// and so on...
});
});
});
更新 1:
我觉得我没有正确解释问题。这就是我的代码现在的样子，从最后一个 promise 开始。我怎样才能更改它以使数组位于问题的顶部？
.then(response => {
people= response.data; // Array of people including their name id (not their gender though)
for (var key in people) {
var person = {};
person["name"] = people[key].node.name;
person["id"] = people[key].node.id;
finalArray.push(person);
axios.get('api/' + endpoint3, { // Endpoint for getting a persons gender from id
params: {
personId: person.id
}
}).then(response => {
// I don't know what to do here...
});
}
console.log(finalArray); // Gives me an array of objects without "gender".
});
更新 2:
非常感谢您的回答!
我结合了您的一些解决方案，这就是我的真实代码现在的样子。对 http://api.ntjp.se/coop/api/v1/serviceProducers.json 的请求没有发送。 为什么？
我也不想在调用 http://api.ntjp.se/coop/api/v1/serviceProducers.json 之前将整个对象保留在合作响应数组中.我只想从每个对象中保存两个特定的键/值对。这两个键/值对都在每个响应对象中名为“serviceContract”的对象中。 如何保存它们？
<html>
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
getConnectionStatusData();
async function getConnectionStatusData() {
let serviceDomains = await axios.get('http://api.ntjp.se/coop/api/v1/serviceDomains.json', {
params: {
namespace: "crm:scheduling"
}
});
serviceDomainId = serviceDomains.data[0].id;
let connectionPoints = await axios.get('http://api.ntjp.se/coop/api/v1/connectionPoints.json', {
params: {
platform: "NTJP",
environment: "PROD"
}
});
connectionPointId = connectionPoints.data[0].id;
let logicalAddresss = await axios.get('http://api.ntjp.se/coop/api/v1/logicalAddresss.json', {
params: {
logicalAdress: "SE2321000016-167N",
serviceConsumerHSAId: "SE2321000016-92V4",
connectionPointId: connectionPointId
}
});
logicalAddressId = logicalAddresss.data[0].id;
let serviceConsumers = await axios.get('http://api.ntjp.se/coop/api/v1/serviceConsumers.json', {
params: {
connectionPointId: connectionPointId,
logicalAddressId: logicalAddressId
}
});
consumer = serviceConsumers.data.filter(obj => {
return obj.hsaId === "SE2321000016-92V4"
});
serviceConsumerId = consumer[0].id;
let cooperations = await axios.get('http://api.ntjp.se/coop/api/v1/cooperations.json', {
params: {
connectionPointId: connectionPointId,
logicalAddressId: logicalAddressId,
serviceDomainId: serviceDomainId,
serviceConsumerId: serviceConsumerId,
include: "serviceContract"
}
});
for(var idx in cooperations.data) {
var data = async () => { return await axios.get('http://api.ntjp.se/coop/api/v1/serviceProducers.json', {
params: {
connectionPointId: connectionPointId,
logicalAddressId: logicalAddressId,
serviceDomainId: serviceDomainId,
serviceConsumerId: serviceConsumerId,
serviceContractId: cooperations.data[idx].serviceContract.id
}
}) }
cooperations.data[idx].producerDescription = data.description;
cooperations.data[idx].producerHSAId = data.hsaId;
}
console.log(cooperations.data);
}
</script>
</body>
更新 3
我终于让它工作了，但为什么我最后将它插入 finalResult 时必须引用像 response.data[0].description 这样的数据？我的意思是，为什么 response.data.description 不能像@Cold Cerberus 那样工作？
除此之外，我的代码是否正常，还是我做错了什么？
谢谢大家!
<html>
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
getConnectionStatusData();
async function getConnectionStatusData() {
let serviceDomains = await axios.get('http://api.ntjp.se/coop/api/v1/serviceDomains.json', {
params: {
namespace: "crm:scheduling"
}
});
serviceDomainId = serviceDomains.data[0].id;
let connectionPoints = await axios.get('http://api.ntjp.se/coop/api/v1/connectionPoints.json', {
params: {
platform: "NTJP",
environment: "PROD"
}
});
connectionPointId = connectionPoints.data[0].id;
let logicalAddresss = await axios.get('http://api.ntjp.se/coop/api/v1/logicalAddresss.json', {
params: {
logicalAdress: "SE2321000016-167N",
serviceConsumerHSAId: "SE2321000016-92V4",
connectionPointId: connectionPointId
}
});
logicalAddressId = logicalAddresss.data[0].id;
let serviceConsumers = await axios.get('http://api.ntjp.se/coop/api/v1/serviceConsumers.json', {
params: {
connectionPointId: connectionPointId,
logicalAddressId: logicalAddressId
}
});
consumer = serviceConsumers.data.filter(obj => {
return obj.hsaId === "SE2321000016-92V4"
});
serviceConsumerId = consumer[0].id;
let cooperations = await axios.get('http://api.ntjp.se/coop/api/v1/cooperations.json', {
params: {
connectionPointId: connectionPointId,
logicalAddressId: logicalAddressId,
serviceDomainId: serviceDomainId,
serviceConsumerId: serviceConsumerId,
include: "serviceContract"
}
});
var finalData = [];
cooperations.data.forEach(function(cooperation) {
axios.get('http://api.ntjp.se/coop/api/v1/serviceProducers.json', {
params: {
connectionPointId: connectionPointId,
logicalAddressId: logicalAddressId,
serviceDomainId: serviceDomainId,
serviceConsumerId: serviceConsumerId,
serviceContractId: cooperation.serviceContract.id
}
}).then(response => {
finalData.push({serviceContract: cooperation.serviceContract.namespace, serviceProducerDescription: response.data[0].description, serviceProducerHSAId: response.data[0].hsaId});
});
});
console.log(finalData);
}
</script>
</body>
最佳答案
我不太确定你的具体问题。但假设您的意思是您有两个端点，第一个是返回对象数组的端点(我们称它为 'getPeopleArray'):
[
{
name: "John",
id: 1
},
{
name: "Anna",
id: 2
}
]
第二个端点返回给定 id 的 gender(让我们用一个参数 id 调用它 'getGender' code>), .push 不会为你完成这项工作。
你的问题可以这样解决:
let peopleArray = [];
axios.get('api/' + 'getPeopleArray').then(people => {
peopleArray = people;
people.forEach((person, index) => {
axios.get('api/' + 'getGender?id='.concat(person.id.toString()))
.then(gender => {
peopleArray[index].gender = gender;
});
});
});
首先，您保存第一个请求的返回数组，然后您必须遍历该数组中的每个对象，使用 索引从您的第二个端点获取并分配它们的 您的 genders [].forEach(callbackfn) 的参数。只要在所有请求完成期间或之前没有对 peopleArray 进行操作，索引就会正确。
更新 2:
为了回答您在评论“为什么 .push 不起作用？”中的问题，我决定采用另一种方法，如果您想使用 .push 结束您的算法并且不跟踪索引。
let peopleArray = [];
axios.get('api/' + 'getPeopleArray').then(people => {
people.forEach((person) => {
axios.get('api/' + 'getGender?id='.concat(person.id.toString()))
.then(gender => {
peopleArray.push({id: person.id, name: person.name, gender, gender});
});
});
});
这样，当对象的性别也被获取时，您只会将对象推送到您的集合peopleArray。这也将消除必须使用 .map (如评论中建议的那样)来仅存储您希望保留的单个对象的属性，因为您在 peopleArray.push( 行上推送了一个新的结构化对象{id: person.id, name: person.name, gender, gender});.
关于javascript - 合并来自链式 axios 请求的两个数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54742698/