useQuery场景下.then与async/await的功能差异问询

VS Code提示以下useQuery的回调函数可改为async函数（因其返回Promise）：

const { isLoading, refetch } = useQuery(['FETCH CUSTOMERS', page], () => {
  return getCustomersList(page, 100, createQuery(filters)).then(
    ({ rows = 1, totalPages: newTotalPages = 1 }) => {
      if (totalPages !== newTotalPages) {
        setTotalPages(newTotalPages);
      }
      dispatch(loadCustomers(rows));
    }
  );
});

问题：上述场景中，使用.then和用await等待Promise返回后处理的效果是否一致？换成以下async/await写法是否会产生功能差异？

const { isLoading, refetch } = useQuery(['FETCH CUSTOMERS', page], async () => {
  return await getCustomersList(page, 100, createQuery(filters)).then(
    ({ rows = 1, totalPages: newTotalPages = 1 }) => {
      if (totalPages !== newTotalPages) {
        setTotalPages(newTotalPages);
      }
      dispatch(loadCustomers(rows));
    }
  );
});

结论：两种写法功能完全一致，无差异 #

原因如下：

• 原始写法中，回调直接返回getCustomersList().then(...)，而.then()本身就返回Promise，完全符合useQuery对回调的要求（返回Promise或同步值）。
• 修改后的async函数写法里，async关键字会自动将函数返回值包装为Promise；而await getCustomersList(...).then(...)本质是等待.then()返回的Promise完成后，再返回其结果——最终async函数返回的Promise和原始写法的返回值完全等价。

更优的写法建议 #

可以去掉多余的.then()，用await直接解构返回值，让代码逻辑更线性、可读性更强，写法如下：

const { isLoading, refetch } = useQuery(['FETCH CUSTOMERS', page], async () => {
  const { rows = 1, totalPages: newTotalPages = 1 } = await getCustomersList(page, 100, createQuery(filters));
  if (totalPages !== newTotalPages) {
    setTotalPages(newTotalPages);
  }
  dispatch(loadCustomers(rows));
});

这种写法和前两种功能完全一致，但代码结构更清晰，是async/await的典型优势用法。

内容的提问来源于stack exchange，提问作者Muirik