React中Axios出现404错误怎么解决

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《React中Axios请求404错误解决方法》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

在React开发中，尤其是在构建需要与外部API交互的应用程序时，使用像Axios这样的HTTP客户端库是常见的做法。为了更好地管理API请求，例如设置统一的基础URL、请求头或拦截器，我们通常会创建一个自定义的Axios实例。然而，一个常见的错误是虽然创建了自定义实例，但在实际组件中却错误地使用了默认的Axios对象，导致配置未能生效，进而引发如404（Not Found）之类的API请求错误。

理解问题根源：Axios实例的创建与使用

首先，让我们回顾一下原始代码中存在的问题。开发者创建了一个名为instance的Axios实例，旨在将所有请求的基础URL设置为https://api.themoviedb.org/3：

// axios.js
import axios from "axios";

// 创建一个带有基础URL的Axios实例
const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3",
});

export default instance;

然而，在Row.js组件中，尽管定义了fetchUrl，但却错误地导入并使用了默认的axios对象来发起请求：

// Row.js (存在问题的代码片段)
import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 错误：导入了默认的axios

export default function Row({title, fetchUrl})  
{  
  const [movies, setMovies] = useState([])

  useEffect(() =>    {
      async function fetchData() {
            const request = await axios.get(fetchUrl); // 错误：使用了默认的axios
            console.log(request);
      }
      fetchData();
  }, []);

  return (
    <div>
      <h2>{title}</h2>
    </div>
  )
}

当Row.js使用axios.get(fetchUrl)时，它实际上并没有利用axios.js中定义的baseURL。这意味着如果fetchUrl是一个相对路径（例如/trending/all/week?api_key=...），默认的axios会尝试从当前应用所在的域名（例如http://localhost:3000）发起请求，而不是从https://api.themoviedb.org/3。这直接导致服务器返回404错误，因为请求的路径在错误的域名下是不存在的。

控制台中的错误信息Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', ...}明确指出了请求失败，状态码为404，这与上述分析相符。

解决方案：正确导入和使用Axios实例

解决这个问题的关键在于确保在需要发起API请求的组件中，正确导入并使用我们自定义的Axios实例。

步骤一：在Row.js中导入自定义的Axios实例

首先，我们需要修改Row.js文件，将导入默认axios的语句替换为导入我们自定义的instance。假设axios.js文件位于项目根目录下的src文件夹中，并且Row.js也在src文件夹中，那么导入路径可以是./axios。如果axios.js在其他位置，请根据实际路径调整。

// Row.js (修正后的代码片段)
import React, { useState, useEffect } from 'react';
import instance from './axios'; // 正确：导入自定义的Axios实例

export default function Row({title, fetchUrl})  
{  
  const [movies, setMovies] = useState([])

  useEffect(() =>    {
      async function fetchData() {
            // 使用自定义的Axios实例发起请求
            const request = await instance.get(fetchUrl); 
            console.log(request);
      }
      fetchData();
  }, []);

  return (
    <div>
      <h2>{title}</h2>
    </div>
  )
}

通过这一修改，Row.js中的instance.get(fetchUrl)将使用axios.js中配置的baseURL (https://api.themoviedb.org/3)。因此，当fetchUrl为/trending/all/week时，实际发起的请求将是https://api.themoviedb.org/3/trending/all/week，这才是API期望的正确地址。

最佳实践与注意事项

1. 统一Axios配置： 将所有Axios相关的配置（如baseURL、headers、timeout、请求/响应拦截器等）集中在一个文件中，并通过导出一个自定义实例来提供给应用的其他部分使用。这有助于保持代码的整洁性、可维护性和可扩展性。

   // src/api/axiosConfig.js (示例：更规范的Axios配置)
   import axios from 'axios';
   
   const instance = axios.create({
       baseURL: 'https://api.themoviedb.org/3',
       timeout: 5000, // 请求超时时间
       headers: {
           'Content-Type': 'application/json',
           // 'Authorization': `Bearer ${localStorage.getItem('token')}` // 示例：添加认证头
       }
   });
   
   // 可以在这里添加请求拦截器
   instance.interceptors.request.use(
       config => {
           // 在发送请求之前做些什么
           return config;
       },
       error => {
           // 对请求错误做些什么
           return Promise.reject(error);
       }
   );
   
   // 可以在这里添加响应拦截器
   instance.interceptors.response.use(
       response => {
           // 对响应数据做些什么
           return response;
       },
       error => {
           // 对响应错误做些什么
           if (error.response && error.response.status === 401) {
               // 例如：处理未授权错误，重定向到登录页
               console.error('Unauthorized request, please log in.');
           }
           return Promise.reject(error);
       }
   );
   
   export default instance;

2. 环境变量管理： 对于像API基础URL这样的敏感或经常变化的配置，建议使用环境变量（如.env文件）进行管理，而不是硬编码在代码中。

   // .env
   REACT_APP_TMDB_BASE_URL=https://api.themoviedb.org/3

   然后在axiosConfig.js中使用：

   const instance = axios.create({
       baseURL: process.env.REACT_APP_TMDB_BASE_URL,
       // ...
   });

3. 错误处理： 在useEffect中的异步函数中，始终使用try...catch块来捕获和处理可能发生的网络请求错误，提升应用的健壮性。

   useEffect(() => {
       async function fetchData() {
           try {
               const request = await instance.get(fetchUrl);
               setMovies(request.data.results); // 假设API返回的数据在data.results中
           } catch (error) {
               console.error("Error fetching data:", error);
               // 可以设置错误状态，向用户显示错误信息
           }
       }
       fetchData();
   }, [fetchUrl]); // 依赖项中包含fetchUrl，确保当fetchUrl变化时重新请求

总结

正确地创建和使用Axios实例是React应用中进行API请求的关键。通过将Axios配置集中管理，并确保在所有需要发起请求的组件中导入并使用自定义的实例，可以有效避免因配置未生效而导致的404等网络请求错误。这种做法不仅解决了当前的问题，也为构建可维护、可扩展且健壮的React应用程序奠定了基础。务必检查你的导入语句，确保你正在使用你期望的Axios实例。

本篇关于《React中Axios出现404错误怎么解决》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！