Question

我正试图在studentDataPromise之前获取fetchLoansPromise，因为它取决于studentDataPromise返回的数据。

这是我当前的代码：

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

这是事件的当前顺序：

toggleIsReady最初设置为false，但现在为true。
fetchLoansPromise-无法获取，没有获取studentDataPromise
studentDataPromise-正确获取
toggleIsReady-现在设置为false
fetchclassesPromise-正确获取

有什么建议吗？

Answer 1

当您通过所有承诺时，

Promise.all()将被执行。这意味着您无法保证自己的studentDataPromise在fetchLoanPromise之前得到解决。我建议在这里Promise.all

解决该问题的简单方法是，一旦诺言解决，就使用.then()。看起来可能像这样：

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.all()非常适合当您想要确保在所有诺言（您通过的诺言）得到解决后发生的事情。希望这会有所帮助

Answer 2

在其他答辩之前先致电studentDataPromise。

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

Answer 3

您可以做类似

的操作

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的地方。

Answer 4

这就是我解决的方法，现在在解决“ fetchLoansPromise”之前先解决“ fetchStudentData”。

    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);
        });

谢谢大家

ReactJS Promise.All调用顺序

4 个答案: