Reactjs promise.all 调用顺序

IT技术 reactjs promise
2021-05-10 16:16:01

我试图获取studentDataPromise之前,fetchLoansPromise因为它取决于数据studentDataPromise返回。

这是我当前的代码:

Promise.all([studentDataPromise, fetchclassesPromise, fetchLoansPromise])
        .then(() => {
            toggleIsReady();
        })
        .catch(error => {
            throw new Error(error);
        });

这是当前的事件顺序:

  1. toggleIsReady 最初设置为 false,但现在为 true。
  2. fetchLoansPromise- 无法获取它没有studentDataPromise获取
  3. studentDataPromise- 正确获取
  4. toggleIsReady - 现在设置为 false
  5. fetchclassesPromise - 正确获取

有什么建议?

4个回答

我就是这样解决的,现在'fetchStudentData'在'fetchLoansPromise'之前解决了。

    let studentDataPromise = null;
    let fetchClassesPromise = null;
    let fetchLoansPromise = null;
    useEffect(() => {
        studentDataPromise = fetchStudentData();
    }, []);

    useEffect(() => {
        fetchClassesPromise = fetchClasses();
    }, []);

    useEffect(() => {
        fetchLoansPromise = resolveStudentDataPromise();
    }, []);
    async function resolveStudentDataPromise() {
        await Promise.all([studentDataPromise]);
        fetchLoans();
    }

    Promise.all([studentDataPromise, fetchClassesPromise, fetchLoansPromise])
        .then(() => {
            toggleIsReady();
        })
        .catch(error => {
            throw new Error(error);
        });

谢谢大家

Promise.all()当你传递的所有Promise都解决时被执行。这意味着您不能保证studentDataPromisefetchLoanPromise. 我建议在这里看一眼Promise.all

解决它的简单方法是.then()在Promise解决后使用。这可能看起来像这样:

let studentDataPromise = new Promise((resolve, reject) => {
  /**
   * 
   * 
   * **/
   reject(/**Something goes here**/)

  /**
   * Some Code here
   * 
   */
  resolve(/**Something goes here**/)

})

studentDataPromise
  .then((/**Whatever you return from resolve()**/) => {
    // Here you can call your fetchLoansPromise
    fetchLoansPromise
      .then(() => {
        /*** ***/
      })
  })

或者更优雅,使用async/await

let studentDataPromise = () => {
  return new Promise((resolve, reject) => {

    /**
     * 
     * **/

     resolve()

  })
}


let someAsyncFunction = async () => {
  try {
    let studentData = await studentDataPromise()
    // Here you are guaranteed that your promise resolved
    // And you can call your other function
  }
  catch (err) {
  }
}

无论哪种方式,您都必须确保您的第一个Promise得到解决,然后您才能完成其他功能。Promise.all()当你想确保在你所有的Promise(你传递的)得到解决之后会发生一些事情时,这是很棒的。希望这可以帮助

studentDataPromise在其他Promise之前调用

studentDataPromise().then((data) => {
  Promise.all([fetchclassesPromise, fetchLoansPromise])
})

你可以做类似的事情

Promise.all([studentDataPromise, fetchclassesPromise])
    .then(([studentData, classesData]) => fetchLoans(studentData))
    .then(() => toggleIsReady())
    .catch(error => {
        // handle exception
    });

或者使用异步等待:

try {
    const [studentData, classesData] = await Promise.all([studentDataPromise, fetchclassesPromise]);
    const loansData = await fetchLoans(studentData);
    toggleIsRead();
} catch (e) {
    // handle exception
}

哪里fetchLoans会返回一个fetchLoansPromise.