问题描述：React中Axios 404错误的根源
在react应用开发中，尤其是在与外部api交互时，开发者可能会遇到axioserror: request failed with status code 404的错误。这通常意味着客户端尝试请求的资源在服务器上不存在，或者请求的url不正确。当开发者创建了自定义的axios实例来配置baseurl等全局设置，但在实际发起请求时却未正确使用该实例，就可能导致此类问题。
以下是原始代码中 Row.js 和 axios.js 的示例：
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 (
{title}
)
}axios.js (原始代码)
import axios from "axios";
// 创建了一个带有baseURL的axios实例
const instance = axios.create({
baseURL: "https://api.themoviedb.org/3",
});
export default instance; // 导出了这个自定义实例从上述代码可以看出，axios.js 文件中创建了一个名为 instance 的Axios实例，并为其设置了 baseURL。然而，在 Row.js 组件中，useEffect 钩子内部的 fetchData 函数仍然使用了全局导入的 axios 对象来发起请求 (axios.get(fetchUrl))，而不是 axios.js 中定义的 instance。这意味着 fetchUrl 将不会自动与 baseURL (https://api.themoviedb.org/3) 拼接，导致请求发送到错误的或不完整的URL，从而引发404错误。
理解Axios实例的作用
axios.create() 方法允许我们创建一个Axios的自定义实例。这个实例可以拥有自己独立的配置，例如：
- baseURL: 统一的API基础URL，避免在每个请求中重复指定。
- headers: 默认的请求头，如 Authorization 令牌或 Content-Type。
- timeout: 请求超时时间。
- interceptors: 请求和响应拦截器，用于在请求发送前或响应返回后进行统一处理（如添加认证信息、错误处理等）。
通过创建和使用自定义实例，我们可以更好地管理和组织API请求，提高代码的可维护性和可扩展性。当一个项目需要与多个不同的API服务交互，或者对某些API请求有特定的全局配置时，使用Axios实例尤为重要。
解决方案：正确引用和使用Axios实例
解决这个问题的关键在于确保在需要发起API请求的组件中，正确导入并使用我们自定义的Axios实例。
步骤一：导入自定义Axios实例
在 Row.js 组件中，我们需要从 axios.js 文件中导入我们创建的 instance，而不是全局的 axios 对象。
// Row.js
import React, { useState, useEffect } from 'react';
import instance from './axios'; // 导入自定义的axios实例
// 注意：如果axios.js在同级目录，路径为 './axios'；如果路径不同，请根据实际情况调整。步骤二：使用自定义实例发起请求
将 fetchData 函数中的 axios.get(fetchUrl) 替换为 instance.get(fetchUrl)。
// Row.js
useEffect(() => {
async function fetchData() {
// 使用自定义的instance发起请求
const request = await instance.get(fetchUrl);
console.log(request);
}
fetchData();
}, []);完整示例代码（修正后的 Row.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() {
try {
// 使用自定义实例发起请求，fetchUrl将与baseURL拼接
const request = await instance.get(fetchUrl);
console.log(request.data); // 通常我们关心的是响应数据
setMovies(request.data.results); // 假设API返回的数据在results字段
} catch (error) {
console.error("API请求失败:", error);
// 可以在这里添加错误处理逻辑，例如显示错误消息给用户
}
}
fetchData();
}, [fetchUrl]); // 建议将fetchUrl加入依赖数组，如果它可能改变的话
return (
{title}
{/* 在这里渲染电影列表 */}
{/* {movies.map(movie => (
{movie.title || movie.name}
))} */}
)
}注意事项与最佳实践
- 路径管理： 当你使用 baseURL 配置Axios实例后，instance.get(fetchUrl) 中的 fetchUrl 应该是相对于 baseURL 的路径。例如，如果 baseURL 是 https://api.themoviedb.org/3，并且你想请求 https://api.themoviedb.org/3/trending/all/week，那么 fetchUrl 应该只包含 /trending/all/week。
- 错误处理： 在 async/await 结构中，使用 try...catch 块捕获异步操作可能抛出的错误至关重要。这有助于提高应用的健壮性，并在API请求失败时提供友好的用户反馈。
- useEffect 依赖数组： useEffect 的第二个参数是依赖数组。如果数组为空 ([])，副作用函数只会在组件挂载时运行一次。如果 fetchUrl 是一个可能变化的 prop，你可能需要将其添加到依赖数组中，以便在 fetchUrl 改变时重新发起请求。
- API Key 管理： 尽管本例中的404错误与API Key无关，但在实际项目中，API Key等敏感信息应妥善管理。最佳实践是将其存储在环境变量中（例如 .env 文件），并通过 process.env.REACT_APP_API_KEY 等方式访问，避免硬编码到代码中。
- 调试技巧： 当遇到API请求问题时，利用浏览器开发者工具的“网络”（Network）选项卡是必不可少的。你可以检查实际发出的请求URL、请求头、响应状态码和响应体，这有助于快速定位问题。
总结
正确配置和使用Axios实例是React应用中进行高效、可维护API请求的关键。通过为Axios实例设置 baseURL 和其他默认配置，并确保在所有API请求中都使用这个自定义实例，我们可以避免因请求路径不完整或配置不当导致的常见404错误。遵循本教程中的步骤和最佳实践，将有助于构建更健壮、更专业的React应用程序。
