Fetch请求已resolved但无法获取返回数组问题求助

嘿，这个问题我太熟了！你看到的Promise {<pending>}其实是异步操作的正常表现——fetch本身就是异步的，你定义的Categories变量存的根本不是最终的分类数组，而是整个异步请求的Promise链本身。

你代码里的.then回调确实能拿到body.categories，但那是在请求完成后才会执行的逻辑。而你直接console.log(Categories)的时候，JavaScript根本还没等到请求完成，所以打印的是Promise对象（哪怕后来状态变成resolved，你打印的还是这个容器，不是里面的值）。

方案1：用.then链式调用获取最终值 #

如果你只是想在控制台看到正确的数组，或者在其他地方使用这个数据，得继续在Promise链上处理：

let Categories = fetch('http://localhost:3001/categories?' )
 .then((response) => response.json()) // 这里可以简化写法，不用单独存data变量
 .then((body) => {
 console.log("fetching categories...")
 console.log(body.categories)
 return body.categories
 })

// 要拿到实际的数组，得这么做：
Categories.then(actualCategories => {
  console.log('真正的分类数组:', actualCategories);
  // 在这里处理你的数据，比如渲染、存储到状态里
});

export default Categories

方案2：用async/await让代码更“同步” #

如果你觉得链式调用看着麻烦，async/await语法会更直观，把异步代码写得像同步代码一样：

async function fetchCategories() {
  try {
    // 等待请求完成
    const response = await fetch('http://localhost:3001/categories?');
    // 等待响应体解析为JSON
    const body = await response.json();
    console.log("fetching categories...");
    console.log(body.categories);
    return body.categories;
  } catch (err) {
    // 别忘了处理请求失败的情况！
    console.error('获取分类出错了:', err);
    return [];
  }
}

const Categories = fetchCategories();
// 同样，Categories还是Promise，使用时需要await或者.then
Categories.then(cats => console.log(cats));

export default Categories

额外提醒：如果是在框架里用（比如React） #

要是你在React组件里想用这个数据，最好结合状态管理来处理，比如用useState和useEffect：

import { useState, useEffect } from 'react';

function CategoryList() {
  const [categories, setCategories] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [fetchError, setFetchError] = useState(null);

  useEffect(() => {
    const getCategories = async () => {
      try {
        const res = await fetch('http://localhost:3001/categories?');
        const body = await res.json();
        setCategories(body.categories);
      } catch (err) {
        setFetchError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    getCategories();
  }, []);

  if (isLoading) return <p>加载中...</p>;
  if (fetchError) return <p>出错了: {fetchError}</p>;

  return (
    <ul>
      {categories.map(cat => (
        <li key={cat.id}>{cat.name}</li>
      ))}
    </ul>
  );
}

核心点就是：异步操作的结果不会直接赋值给变量，而是放在Promise这个“容器”里。你必须通过.then或者await来“打开”这个容器，才能拿到里面真正的数据。直接打印Promise对象，看到的自然是它的状态和容器本身啦。

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