javascript - 合并来自链式 axios 请求的两个数组-6ren

javascript - 合并来自链式 axios 请求的两个数组

转载作者：行者123 更新时间：2023-11-30 14:09:30

我将一堆 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/

文章推荐： c# - 操作数的顺序对于 C# 中的重载 == 运算符是否重要

文章推荐： javascript - 在查看图表值方面需要帮助

链式-父类中返回子类对象
一晃五年没写博客了，依旧再C#上耕耘，依旧没有啥建树，现在也不知道.net上还有多少人再使用，在这里分享一些自己觉得写的还算优雅的代码。对于自己写着完的代码，我特别喜欢链式（来源于jQuer
c# - 链式 if 语句的模式
我正在构建一个吉他和弦查找应用程序。我使用多维数组来表示指板。数组中的每个元素都由具有字符串属性“Note”的 FretSpace 结构表示。为了初始化指板上的音符属性，我传递了要处理的吉他弦的详细信
Javascript 链式 promise
我在演示代码中使用 setTimeout 函数模拟了 3 个 ajax 调用。我将从一段运行良好的代码开始:所有调用都是并行进行的，我希望所有调用都能成功，否则会出现错误。 var p1 = func
python - 链式 AND 条件给出不明确的结果
谁能解释一下？ a = [2,3,4] b = [5,6,8,9] print(len(a) > 0) print(len(b) > 0) print((len(a) > 0) & len(b) >
Java 链式/嵌套方法调用
我正在处理具有多个子 JSONObject 的 JSONObject。这是我填写内容的方式: myJson.getJSONObject(CAT_NAME).put(VAR_NAME, var)
c# - 链式 IF 结构
想象一下这种情况，我有一个需要检查属性的对象。但是，该对象当前可以具有空值。如何在一个“if”条件下检查这两个条件？目前，我必须做这样的事情: if (myObject != null) {
java - 链式 Observable
我有一个对象集合，称它们为obj。他们有一个 act() 方法。 act() 方法最终会导致 o 上的 event() observable 调用 onComplete。链接这些的好方法是什么？即
python - 链式 QSortFilterProxyModel
假设我有一个列表变量 datalist 存储 10,000 个字符串实体。QTableView 只需要显示其中的一些实体。这就是为什么 QTableView 被指定为 QSortFilterProxy
wix - 链式 MSI 安装程序工具
我正在寻找支持链式 MSI 安装的工具(最好不是 InstallShield，而且最好是便宜/免费的)。我有几个小型安装需要能够单独部署，但也需要作为一个组部署，我不想维护多个安装程序。看起来我需要
c# - 链式 LINQ 语句的效率如何？
在这种情况下，我想迭代集合中除最后 2 个元素之外的所有元素。假设我采用了一种奇怪的方式，例如 x.Reverse().Skip(2).Reverse()。每个 LINQ 操作是否会有效地生成一个
javascript - 链式 html 数字选择
对于javascript来说非常陌生，我有两个html数字选择，包括年份，我想将第二个选择与第一个选择链接起来，这样当我在第一个选择中选择年份时(而第二个选择没有选项)首先)，第二个选择应包括从所选数
javascript - 链式 bluebird .then() 的奇怪执行顺序
有人可以向我解释一下为什么以下两个链式函数: // returns zero if okay var resetCounter = function (model) { return new Prom
AngularJS 链式 promise 和最终回调
所以我有 2 个 promise 函数。当第一个函数出现错误时，我希望它显示错误消息。当完成或失败时，我希望他们执行一个finally catch all 函数，但由于某种原因它不起作用。我的代码如下
javascript - 链式 promise 发挥作用
我有一个函数 const func = () => server.insertPatientSurveyQuestionToDataBase(Store.getPatientID(), SurveyN
javascript - 链式 promise 如何在微任务队列中排队
(async function() { var a,b; function flush(){ return new Promise(res => {
javascript - 链式 promise 并使用所有变量
这个问题已经有答案了: Promise chaining: Use result from previous promise in next then callback [duplicate] (1
powershell - 链式 powershell 替换命令是否一个接一个地执行？
这可能不是专业正则表达式理解的问题。唯一重要的是因为我正在运行多个链式替换命令，这些命令会影响文本文件中的某些相同文本。我还想象在替换之前，根据分隔符词(需要多次替换)的使用方式对 txt 文件进行分
python - 链式 Python 类调用
我正在尝试构建一组类来定义 OSI 堆栈中协议(protocol)的分层属性...从抽象意义上讲，我只需要从父 python 类继承属性，但我需要能够调用整个类链一次...所以，我正在寻找这样的东西.
javascript - 链式 promise 不会捕获错误
我正在努力兑现 promise ，到目前为止我偶然发现了这一点: new Promise((resolve, reject) => { setTimeout(() => { r
javascript - 链式 promise 并装饰对象
我试图理解 promise ，我需要链接它们并装饰来自不同端点的对象宽度数据。例如: 我的 Node-express 应用程序中有这个 //controller.js export const ge

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 合并来自链式 axios 请求的两个数组