Axios调用REST API是否需额外配置？Fetch转Axios的正确写法

问题描述 #

我正尝试将项目中的Fetch API替换为Axios的GET请求，同时保留async/await语法。原Fetch代码可以正常工作，但改写后的Axios代码无法达到预期效果。

尝试的代码对比：

// before
const fetchPlanets = async () => {
  const res = await fetch("http://swapi.dev/api/planets/");
  return res.json();
};

// after（无法正常工作的版本）
const fetchPlanets = async () => {
  const res = await axios
    .get("http://swapi.dev/api/planets/")
    .then((respond) => {
      respond.data;
    });
};

我的理解：

• async用于声明异步函数
• 原Fetch代码返回res.json()的结果
• Axios无需手动调用res.json()，返回结果本身就是JSON类型

附带现有完整代码：

Planets.js #

import React from "react";
import { useQuery } from "react-query";
import Planet from "./Planet";
// import axios from "axios";

const fetchPlanets = async () => {
  const res = await fetch("http://swapi.dev/api/planets/");
  return res.json();
};

const Planets = () => {
  const { data, status } = useQuery("planets", fetchPlanets);
  console.log(data);

  return (
    <div>
      <h2>Planets</h2>

      {status === "loading" && <div>Loading data...</div>}

      {status === "error" && <div>Error fetching data!</div>}

      {status === "success" && (
        <div>
          {data.results.map((planet) => (
            <Planet key={planet.name} planet={planet} />
          ))}
        </div>
      )}
    </div>
  );
};

export default Planets;

Planet.js（参考） #

import React from "react";

const Planet = ({ planet }) => {
  return (
    <div className="card">
      <h3>{planet.name}</h3>
      <p>Population - {planet.population}</p>
      <p>Terrain - {planet.terrain}</p>
    </div>
  );
};

export default Planet;

问题原因与解决方法 #

你的Axios代码存在两个关键问题：

1. 混用async/await与.then()：既然已经使用async/await语法，就没必要嵌套.then()，这会导致逻辑混乱且冗余。
2. .then()未返回数据：你在.then()中访问了respond.data但没有return，导致await最终拿到的是undefined，无法给useQuery提供有效数据。

正确的Axios改写方式 #

直接用async/await获取Axios响应，返回响应对象中的data字段即可——Axios会自动解析JSON，data就是解析后的结果，和原Fetch中res.json()返回的结构完全一致：

const fetchPlanets = async () => {
  const res = await axios.get("http://swapi.dev/api/planets/");
  return res.data;
};

修改后的完整Planets.js #

记得解开axios的导入注释：

import React from "react";
import { useQuery } from "react-query";
import Planet from "./Planet";
import axios from "axios"; // 解开注释

const fetchPlanets = async () => {
  const res = await axios.get("http://swapi.dev/api/planets/");
  return res.data;
};

const Planets = () => {
  const { data, status } = useQuery("planets", fetchPlanets);
  console.log(data);

  return (
    <div>
      <h2>Planets</h2>

      {status === "loading" && <div>Loading data...</div>}

      {status === "error" && <div>Error fetching data!</div>}

      {status === "success" && (
        <div>
          {data.results.map((planet) => (
            <Planet key={planet.name} planet={planet} />
          ))}
        </div>
      )}
    </div>
  );
};

export default Planets;

这样修改后，useQuery就能拿到和原Fetch代码完全一致结构的数据，组件可以正常渲染行星列表。

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