Javascript 如何使用Axios调用多个rest请求

我是新手。我已经阅读了一些如何在Reactjs中创建客户端rest的示例。
我的问题-我得到所有课程，然后我想为每门课程调用另一个HTTP服务。我的代码如下

export default class Courses extends Component{

    constructor(props) {
        super(props);
        this.state = {courses: []};
    }

    componentDidMount() {
        axios.get('http://localhost:8065/api/course/all')
        .then(response => {
            const courseList = response.data.map(c => {
                return {
                  id: c.id,
                  name: c.name,
                  previewBase64:c.previewBase64,
                  authors:
                     axios.get('http://localhost:8065/api/course/getAuthorsByCourseId/'+c.id+"/")
                    .then(res => {
                        const profiles = res.data.map(p => {
                            return {
                              name: p.name                       
                            };
                          })
                    })
                };
              })
              console.log(courseList);
              const newState = Object.assign({}, this.state, {
                courses: courseList
              });
              // store the new state object in the component's state
              this.setState(newState);
        }); 
    };
    render(){
        return(
            <CourseList courses={this.state.courses}/>
        )
    }
}

导出默认类课程扩展组件{
建造师（道具）{
超级（道具）；
this.state={courses:[]}；
}
componentDidMount（）{
axios.get（）http://localhost:8065/api/course/all')
。然后（响应=>{
const courseList=response.data.map（c=>{
返回{
id:c.id，
姓名：c.name，
previewBase64:c.previewBase64，
作者：
axios.get（）http://localhost:8065/api/course/getAuthorsByCourseId/“+c.id+”/”）
。然后（res=>{
const profiles=res.data.map（p=>{
返回{
姓名：p.name
};
})
})
};
})
控制台日志（课程列表）；
const newState=Object.assign（{}，this.state{
课程：课程专家
});
//将新状态对象存储在组件的状态中
this.setState（newState）；
}); 
};
render（）{
返回(
)
}
}

my CourseList.jsx：

const courseList = (props) => (
    <Grid>
    <Row>
        {
            props.courses.map((course, i)=>{
                return  (
                <Col key ={i} lg={2} sm={8} xs={12} md={6}>
                    <div className="course-block">
                         <p>{course.name}</p>
                         <p>AUTHOR NAME WILL BE HERE </p>
                    </div>

                </Col>)
                }) 
            }                             
    </Row>
</Grid>
);

export default courseList;

const courseList=（道具）=>(
{
道具.课程.地图（（课程，i）=>{
返回(
{课程名称}

作者姓名将在这里

)
}) 
}                             
);
导出默认课程列表；

这段代码很有效，但我对这样的作者有“承诺”。 {id:7，名称：“HTML”，previewBase64:，作者：Promise}

您需要或

---

您可以在下面尝试，将其用作参考

---

您可以尝试用这种方式重构，无论如何，最好只有一个API同时返回课程和作者

componentDidMount() {
    axios.get('http://localhost:8065/api/course/all')
    .then(response => {

      const promises = response.data.map(c => {
        axios.get('http://localhost:8065/api/course/getAuthorsByCourseId/'+c.id+"/")
        .then(res => { //for each course get the authors
            return res.data.map(p => {
                return {
                  name: p.name                       
                };
              });
        })
        .then(profiles => ({ id: c.id, profiles })); //keep a reference with the course
      });

      axios.all(promises, (allProfiles) => { //wait for all getAuthorsByCourseId are resolved
        const profileMap = allProfiles.reduce((map, profiles)=> {
          return map[profiles.id] = profiles.profiles;
        }, {}); // from array to map
        const courseList = response.data.map(c => {
          return {
            id: c.id,
            name: c.name,
            previewBase64:c.previewBase64,
            authors: profileMap[c.id],
          };
        }); //build the courseList with all data resolved
        const newState = Object.assign({}, this.state, {
          courses: courseList
        });
        // store the new state object in the component's state
        this.setState(newState);       
      });
    }); 
};

---

尝试等待：

作者：等待axios.get（'http……

你的Author对象里面是什么？而不是

。然后在你的作者调用try
。subscribe
之后，创建一个包含课程和作者的API不是问题。但是如果我想创建类似微服务的API，我应该将其分开吗？我认为对于这个用例，最好有一个API，因为se课程和作者是非常密切的实体，您可以通过一个简单的连接请求（即关系数据库）将所有信息提供给客户机，从而将负载和网络延迟降至最低
async componentWillMount() {
        let data = await axios.get('http://localhost:8065/api/course/all').then(response => {
            return response
        })
        const courseList = data.map(c => {
            return {
                id: c.id,
                name: c.name,
                previewBase64: c.previewBase64,
                authors: await axios.get('http://localhost:8065/api/course/getAuthorsByCourseId/' + c.id + "/")
                    .then(res => {
                        const profiles = res.data.map(p => {
                            return {
                                name: p.name
                            };
                        })
                    })
            };
        })
        console.log(courseList);
        const newState = Object.assign({}, this.state, {
            courses: courseList
        });
        // store the new state object in the component's state
        this.setState(newState);
    }

componentDidMount() {
    axios.get('http://localhost:8065/api/course/all')
    .then(response => {

      const promises = response.data.map(c => {
        axios.get('http://localhost:8065/api/course/getAuthorsByCourseId/'+c.id+"/")
        .then(res => { //for each course get the authors
            return res.data.map(p => {
                return {
                  name: p.name                       
                };
              });
        })
        .then(profiles => ({ id: c.id, profiles })); //keep a reference with the course
      });

      axios.all(promises, (allProfiles) => { //wait for all getAuthorsByCourseId are resolved
        const profileMap = allProfiles.reduce((map, profiles)=> {
          return map[profiles.id] = profiles.profiles;
        }, {}); // from array to map
        const courseList = response.data.map(c => {
          return {
            id: c.id,
            name: c.name,
            previewBase64:c.previewBase64,
            authors: profileMap[c.id],
          };
        }); //build the courseList with all data resolved
        const newState = Object.assign({}, this.state, {
          courses: courseList
        });
        // store the new state object in the component's state
        this.setState(newState);       
      });
    }); 
};