React中使用Fetch与async/await为何返回Promise？

问题场景 #

你封装了Fetch请求函数：

export const fetcher = (url, options = null) => {

  const handle401Response = error => {
    throw error;
  }

  const isResponseValid = response => {
    if (!response.ok)
      throw response;
    else
      return response.json();
  }

  return fetch(url, { ...options, credentials: 'include' })
    .then(isResponseValid)
    .catch(handle401Response);
}

定义了API调用函数：

export const getGroups = (id = null) => {
  return fetcher(`${API_GROUP_URL}${id !== null ? `?id=${id}` : ''}`);
}

在组件中调用时控制台输出Promise{}：

export function SomeComponent(props) {

  const groups = async () => {
    try {
      const ret = await getGroups();
      return ret;
    } catch (err) {
      console.log(err);
    }
  };

  console.log(groups());
  
  return <h1>Component</h1>
}

原因分析 #

1. async函数的本质：所有被async标记的函数，返回值必然是Promise对象——哪怕内部return了普通值，JavaScript也会自动把它包装成已决议的Promise返回。所以调用groups()时，直接得到的是Promise，而非getGroups()返回的实际数据。
2. 未正确等待Promise完成：你在组件顶层直接调用groups()，既没有用await等待这个Promise决议，也没有通过.then()处理结果，所以控制台打印的是处于待决议状态的Promise对象。

解决方法 #

在React组件中，异步请求应该放在useEffect钩子中执行，同时用状态存储请求结果：

import { useState, useEffect } from 'react';

export function SomeComponent(props) {
  // 用状态存储请求结果和错误
  const [groupsData, setGroupsData] = useState(null);
  const [fetchError, setFetchError] = useState(null);

  useEffect(() => {
    // 定义内部异步函数
    const fetchGroups = async () => {
      try {
        const ret = await getGroups();
        setGroupsData(ret); // 将结果存入状态
      } catch (err) {
        console.log(err);
        setFetchError(err); // 存储错误信息
      }
    };

    fetchGroups(); // 执行异步请求
  }, []); // 空依赖数组表示仅在组件挂载时执行一次

  // 此时打印的是状态中的数据，会随着请求完成更新
  console.log(groupsData);
  
  return <h1>Component</h1>
}

如果需要在事件触发时执行请求（比如点击按钮），可以这样写：

export function SomeComponent(props) {
  const handleFetchGroups = async () => {
    try {
      const data = await getGroups();
      console.log(data); // 这里能拿到实际数据
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <h1>Component</h1>
      <button onClick={handleFetchGroups}>获取分组</button>
    </div>
  )
}

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