Reactjs promise.all 调用顺序答案

【问题标题】：Reactjs promise.all order of callsReactjs promise.all 调用顺序
【发布时间】：2019-04-04 02:58:43
【问题描述】：

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

这是我当前的代码：

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

这是当前的事件顺序：

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

有什么建议吗？

【问题讨论】：

如果fetchLoansPromise 需要studentDataPromise 已解决，为什么要使用Promise.all 来并行运行它们？
如果你想要一个在另一个之前，不要使用Promise.all。

标签： reactjs promise

【解决方案1】：

这就是我解决它的方法，现在 '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);
        });

谢谢大家

【讨论】：

【解决方案2】：

Promise.all() 在你传入的所有 promise 都被解析时被执行。这意味着您不能保证您的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() 非常适合当您想确保在您的所有承诺（您传递的）得到解决之后发生某些事情。希望这会有所帮助

【讨论】：

【解决方案3】：

在其他承诺之前致电studentDataPromise。

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

【讨论】：

【解决方案4】：

你可以做类似的事情

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。

【讨论】：