Javascript React-从多个API请求中检索值并在呈现函数中显示

我是个新来的人。这里我尝试执行多个API请求，流程如下：

首先我称之为。getAllJobsAPI（）；它检索一个JSON字符串数组。然后在每次回调期间，我使用这个.getLastBuildAPI（作业）调用另一个API；函数，该函数返回对应字符串值的id。在这个API的回调期间，我调用this.getAndroidLintResultAPI（id，job）；它在回调中返回var numberOfHighPriorityWarnings整数值

我需要在饼图（VictoryPie）中显示它们，其中包含从该.getAllJobsAPI（）检索到的相应字符串作业名称以及从该.getAndroidLintResultAPI（id，作业）检索到的numberOfHighPriorityWarnings值

感谢您的洞察力，让这项工作

代码

      import React, { Component } from 'react';
      import logo from './logo.svg';
      import './App.css';
      import { VictoryPie } from 'victory';


      class App extends Component {

        getAllJobsAPI(){
          var headers = new Headers();
          headers.append('Authorization', 'Basic YWRtaW46YWRtaW4=');

          fetch('http://localhost:8080/api/json', {headers: headers})
          .then((result) => {
            // Get the result
            // If we want text, call result.text()
            return result.json();
          }).then((jsonResult) => {
            // get all jobs 
            var jobs = [];

            Object.keys(jsonResult.jobs).forEach(key => {
              jobs.push(jsonResult.jobs[key].name);

              var job = jsonResult.jobs[key].name;
              console.log(job);

              this.getLastBuildAPI(job);   

          });

          console.log(jsonResult);

          })
        }

        getLastBuildAPI(job){
          var headers = new Headers();
          headers.append('Authorization', 'Basic YWRtaW46YWRtaW4=');

          fetch('http://localhost:8080/job/'+ job +'/lastBuild/api/json', {headers: headers})
          .then((result) => {
            // Get the result
            // If we want text, call result.text()
            return result.json();
          }).then((jsonResult) => {
            // get the build id and build status 
            var id = jsonResult.id;
            var status = jsonResult.result;

            console.log('id '+ id); 
            console.log('status '+ status);

            this.getAndroidLintResultAPI(id, job);

            console.log(jsonResult);
          })
        }

        getAndroidLintResultAPI(id, job){
          var headers = new Headers();
          headers.append('Authorization', 'Basic YWRtaW46YWRtaW4=');



          fetch('http://localhost:8080/job/'+ job +'/'+ id +'/androidLintResult/api/json', {headers: headers})
          .then((result) => {
            // Get the result
            // If we want text, call result.text()
            return result.json();
          }).then((jsonResult) => {
            // get lint results 
            var numberOfHighPriorityWarnings = jsonResult.numberOfHighPriorityWarnings;
            console.log('numberOfHighPriorityWarnings ' + numberOfHighPriorityWarnings);

            console.log(jsonResult);
          })
        }

        render() {
          this.getAllJobsAPI();

          return (
            <div className="App">
              <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1 className="App-title">Build Results</h1>
              </header>

              <VictoryPie 
                data={[
                  { x: "job name 1", y: numberOfHighPriorityWarnings for the job name 1},
                  { x: "job name 2", y: numberOfHighPriorityWarnings for the job name 2}
                ]}
              />

            </div>
          );
        }
      }

      export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“胜利”中导入{VictoryPie}；
类应用程序扩展组件{
getAllJobsAPI（）{
var headers=新的headers（）；
append（'Authorization'，'Basic YWRtaW46YWRtaW4='）；
取（'http://localhost:8080/api/json“，{headers:headers}）
。然后（（结果）=>{
//得到结果
//如果需要文本，请调用result.text（）
返回result.json（）；
}).然后（（jsonResult）=>{
//得到所有的工作
var作业=[]；
key（jsonResult.jobs）.forEach（key=>{
jobs.push（jsonResult.jobs[key].name）；
var job=jsonResult.jobs[key].name；
控制台日志（作业）；
这个.getLastBuildAPI（作业）；
});
log（jsonResult）；
})
}
getLastBuildAPI（作业）{
var headers=新的headers（）；
append（'Authorization'，'Basic YWRtaW46YWRtaW4='）；
取（'http://localhost:8080/job/“+job+”/lastBuild/api/json'，{headers:headers}）
。然后（（结果）=>{
//得到结果
//如果需要文本，请调用result.text（）
返回result.json（）；
}).然后（（jsonResult）=>{
//获取生成id和生成状态
var id=jsonResult.id；
var status=jsonResult.result；
console.log（'id'+id）；
console.log（'状态'+状态）；
this.getandroidlintsultapi（id，job）；
log（jsonResult）；
})
}
GetAndroidIntResultAPI（id，作业）{
var headers=新的headers（）；
append（'Authorization'，'Basic YWRtaW46YWRtaW4='）；
取（'http://localhost:8080/job/“+job+”/“+id+”/androidlintsult/api/json'，{headers:headers}）
。然后（（结果）=>{
//得到结果
//如果需要文本，请调用result.text（）
返回result.json（）；
}).然后（（jsonResult）=>{
//获取lint结果
var numberOfHighPriorityWarnings=jsonResult.numberOfHighPriorityWarnings；
console.log（'numberOfHighPriorityWarnings'+numberOfHighPriorityWarnings）；
log（jsonResult）；
})
}
render（）{
这个.getAllJobsAPI（）；
返回(
构建结果
);
}
}
导出默认应用程序；

如果您能告诉我如何在render函数的VictoryPie中获取这些数据，我将不胜感激

---

谢谢，

我强烈推荐使用。更不用说，您可以链接所有调用，使代码更易于理解

但是，请记住，进行的api调用越多，在将最终结果输入到组件中之前所需的时间就越长。例如，调用

getLastBuildAPI

只是为了获取每个作业的id。您不能在

getAllJobsAPI

中返回每个作业的id并删除额外的

getLastBuildAPI

尽管如此，我还是举了个例子，让你知道Promise将如何帮助你

我还使用

setTimeout

模拟异步调用

/*api.js（从组件中删除整个逻辑，它不需要知道如何获取每个作业）*/
const generateRandomInt=（）=>parseInt（Math.random（）*100,10）
const generateRandomJobs=（）=>[…新数组（3）.keys（）].map（key=>`Job${key}`）
函数getAndroidIntResultAPI（id，作业）{
返回新承诺（解决=>
setTimeout（（）=>解析({
身份证件
姓名:job,，
highPriorityWarnings:GeneratorDomain（），
}), 1000)
)
}
函数getLastBuildAPI（作业）{
返回新承诺（解决=>
设置超时（（）=>{
const jobId=generateRandomInt（）
决心({
id:jobId，
姓名:job,，
})
}, 1000)
)
}
函数getAllJobsAPI（）{
返回新承诺（解决=>
设置超时（（）=>{
const jobs=generateRandomJobs（）
解决（工作）
}, 1000)
)
}
//如果可能，只将此方法导出到组件
函数getJobList（）{
返回getAllJobsAPI（）
.then（jobs=>Promise.all（jobs.map（getLastBuildAPI）））
.then（jobs=>Promise.all（jobs.map（job=>getandroidlintsultapi（job.id，job.name）））
}
/*在新文件中启动组件*/
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
加载：对，
职位：[]
}
}
componentDidMount（）{
getJobList（）.then（jobs=>this.setState（{loading:false，jobs}））
}
render（）{
const{loading，jobs}=this.state
返回(
{加载
？获取作业。。。
：this.state.jobs.map（作业=>
{${job.name}:${job.highPriorityWarnings}}
)
}
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)

<