React中如何将Axios请求结果赋值给变量而非Promise

嘿，这个问题我太熟了！踩过同款坑的过来人给你捋清楚：Axios的请求是异步操作，它的返回值本身就是一个Promise对象——这个对象代表的是「一个尚未完成的异步任务」，而不是你最终想要的接口数据。直接把它赋值给变量的话，打印出来自然是Promise啦。

下面给你两种React项目里最常用的正确姿势：

方法1：用async/await（更直观的异步写法） #

因为React组件的顶层代码不能直接用await，所以我们通常会在useEffect钩子里面定义一个异步函数来处理请求：

import { useState, useEffect } from 'react';
import axios from 'axios';

function YourComponent() {
  // 用useState存接口返回的数据，这样数据变化时组件会自动重新渲染
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    // 定义异步函数
    const fetchApiData = async () => {
      try {
        // 用await暂停函数执行，直到Promise完成，拿到真实的响应数据
        const response = await axios.get('你的接口URL');
        // 把数据存入状态
        setApiData(response.data);
        // 这里打印就能拿到实际数据了
        console.log('接口返回数据:', response.data);
      } catch (error) {
        // 捕获请求失败的情况
        console.error('请求出错啦:', error);
      }
    };

    // 调用异步函数
    fetchApiData();
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div>
      {/* 根据数据状态渲染内容 */}
      {apiData ? (
        <pre>{JSON.stringify(apiData, null, 2)}</pre>
      ) : (
        <p>数据加载中...</p>
      )}
    </div>
  );
}

export default YourComponent;

核心是await关键字：它会等待Axios的Promise完成，把Promise的resolve结果（也就是接口响应）赋值给response，这时候你就能通过response.data拿到接口返回的真实数据了。

方法2：用Promise的.then()链式调用（传统异步写法） #

如果你更习惯Promise的原生写法，也可以用.then()来处理成功的回调，.catch()处理错误：

import { useState, useEffect } from 'react';
import axios from 'axios';

function YourComponent() {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    axios.get('你的接口URL')
      .then(response => {
        // Promise成功resolve时，这里拿到真实数据
        const result = response.data;
        setApiData(result);
        console.log('接口返回数据:', result);
      })
      .catch(error => {
        console.error('请求出错啦:', error);
      });
  }, []);

  return (
    <div>
      {apiData ? (
        <pre>{JSON.stringify(apiData, null, 2)}</pre>
      ) : (
        <p>数据加载中...</p>
      )}
    </div>
  );
}

export default YourComponent;

这里的逻辑是：Axios返回的Promise完成后，会自动调用.then()里的回调函数，并把最终数据传进去，你在这里处理数据即可。

关键提醒 #

千万别再直接写const data = axios.get('xxx')然后打印data了！这时候请求还没完成，data只是一个未完成的Promise对象，必须通过await或者.then()等待它完成，才能拿到真实数据。而且在React里一定要用状态（比如useState）来存储数据，不然普通变量更新不会触发组件重新渲染，页面也看不到最新的数据~

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