axios 是否需要額外配置才能從 REST API 獲取數據？

Question

我正在嘗試使用 get 方法將獲取的 API 轉換為 axios。 在此之前，我計划繼續使用“async, await”。

當我替換下面的代碼時：

// 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 可以在尋址 function 時使用。
• 並返回 const res 作為 res.json();
• 另外...axios 不需要 res.json，因為它返回為 json 類型。

到目前為止，這就是我的理解方式。 使用 fetch API，這項工作完美無缺。

代碼應該如何讓 axios 按我的預期工作？

// 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;

和 Pl.net.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;

Answer 1

您的 axios 代碼中有 2 個問題。

1. 你應該返回 respond.data。

2. 您應該返回整個 axios 響應。

所以這會起作用：

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