在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 (
<div>
<h2>{title}</h2>
</div>
)
}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.create() 方法允许我们创建一个Axios的自定义实例。这个实例可以拥有自己独立的配置，例如：
通过创建和使用自定义实例，我们可以更好地管理和组织API请求，提高代码的可维护性和可扩展性。当一个项目需要与多个不同的API服务交互，或者对某些API请求有特定的全局配置时，使用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 组件的代码将如下所示：
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 (
<div>
<h2>{title}</h2>
{/* 在这里渲染电影列表 */}
{/* {movies.map(movie => (
<p key={movie.id}>{movie.title || movie.name}</p>
))} */}
</div>
)
}正确配置和使用Axios实例是React应用中进行高效、可维护API请求的关键。通过为Axios实例设置 baseURL 和其他默认配置，并确保在所有API请求中都使用这个自定义实例，我们可以避免因请求路径不完整或配置不当导致的常见404错误。遵循本教程中的步骤和最佳实践，将有助于构建更健壮、更专业的React应用程序。
以上就是React应用中Axios实例的正确配置与使用：解决API 404问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
110
收藏
