React如何先加载接口再render_react在app组件挂在之前执行完某接口-优快云博客

本文讨论了在React中如何在接口加载完成后进行渲染。对于单个接口，通过在state中设置loading状态并在dispatch回调中更新，然后在render中判断是否加载完成。对于多个接口，如果追求快速渲染，可在父组件加载核心接口，子组件再加载非核心接口；如果希望减少渲染次数，可以使用Promise.all来同步所有接口请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在很多需求中父组件要调用好几个接口传入子组件这时候要注意都是异步调用还是同步调用

1.如果只调用一个的情况下
在state存一个loding的默认值（布尔类型）然后在dispatch中的回调函数callback中去改变state的loding，
然后在render中判断loding 是否return
2.如果多个接口
如果一个子组件需要调用2个或以上的接口有两种情况要考虑：这个组件是要在加载的时候比较快速还是要渲染次数减少。
这不是一个问题

如果要快速就父组件中调用比较核心的接口先渲染核心部分再去子组件调用其他的非核心接口
如果渲染次数减少就要用promise.all的方法把异步调用接口同步转出来

function getUserPromise(promiseX, promiseY){
 return Promise.all([promiseX, promiseY])
 .then(values =>
 // 返回的values由 promiseX 与 promiseY返回的值所构成的数组。
  values
 )
}
function getUserName(){
 let data = 'superman';
 return new Promise((resolve, reject) => {
  setTimeout(resolve(data), 1000);
 })
}
function getUser(){
 let data = {
 id:1,
 username: 'superman',
 gender: 'male'
 }
 return new Promise((resolve, reject) => {
 setTimeout(resolve(data), 2000);
 })
}
getUserPromise(getUserName(), getUser())
.then(data => {
 // 这里的data就是包含了getUserName 和 getUser返回值所组成的数组
 console.log(data); // [ 'superman', { id: 1, username: 'superman', gender: 'male' } ]
 })