链接三个不同的异步函数

Question

我有三个异步函数，但第三个函数在第二个函数解析之前正在运行。这里有什么问题？

 async function getSet () {
//get settings from asyncstorage and setstate
}

 async function pairs () {
//fetch data and set another state
}

 async function fetchIt () {
//fetch another data and set a third state
}
useEffect(() => {
    getSet()
      .then(pairs())
      .then(fetchIt())
      .then(() => {
        setLoading(false);
      });
  }, []);

fetchIt() 在pairs() 之前运行

Answer 1

调用未正确链接。为了更简单，使用async await:

  useEffect(() => {
    (async function () {
      await getSet();
      await pairs();
      await fetchIt();
      setLoading(false);
    })();
  }, []);

如果每个调用都依赖于最后一个调用的结果，它看起来像

const r1 = await getSet();
const r2 = await pairs(r1);
// etcetera

Answer 2

你没有正确地链接'then's。他们也必须回报一个承诺。阅读更多here。

const getSet = async() => {
  //get settings from asyncstorage and setstate
  return new Promise((resolve, reject) => {
    resolve('getSet');
  });
}

const pairs = async() => {
  //fetch data and set another state
  return new Promise((resolve, reject) => {
    resolve('pairs');
  });
}

const fetchIt = async() => {
  //fetch another data and set a third state
  return new Promise((resolve, reject) => {
    resolve('fetchIt');
  });
}

getSet()
  .then(response => {
    console.log(response);
    return pairs();
  })
  .then(response => {
    console.log(response);
    return fetchIt();
  })
  .then(response => {
    console.log(response);
    // setLoading(false);
  });