我整理的一些关于【Java】的项目学习资料（附讲解～～）和大家一起分享、学习一下：

 https://d.51cto.com/bLN8S1

如何使用 Axios 拦截 404 错误

在使用 Axios 发送请求时，有时你会遇到 404 错误，这意味着请求的资源未找到。作为刚入行的开发者，了解如何处理这种错误并实现对其的拦截是非常重要的。本文将通过简单的步骤和示例代码教会你如何实现这一点。

处理 Axios 404 错误的流程

下面是处理 Axios 404 错误的基本流程：

步骤描述
1安装并引入 Axios
2创建 Axios 实例
3设置请求拦截器
4设置响应拦截器
5发送请求并处理结果
步骤详细说明
1. 安装并引入 Axios

首先，你需要确保已经安装了 Axios。如果你在使用 npm，可以通过以下命令来安装：

npm install axios
  • 1.

然后在你的 JavaScript 文件中引入 Axios：

// 引入 axios 库
import axios from 'axios';
  • 1.
  • 2.
2. 创建 Axios 实例

为了对请求配置进行更好控制，建议创建一个 Axios 实例：

// 创建一个 axios 实例
const axiosInstance = axios.create({
  baseURL: ' // 设置基础 URL
  timeout: 1000, // 设置请求超时的时间
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
3. 设置请求拦截器

请求拦截器可以在请求发出前对其进行修改。例如，你可以添加一些通用的 Header 信息：

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在请求发出前进行一些操作，比如添加 Token
    config.headers.Authorization = 'Bearer YOUR_TOKEN';
    return config; // 返回修改后的 config
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
4. 设置响应拦截器

响应拦截器可以捕获响应结果，包括 404 错误，并进行相应处理：

// 添加响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 处理正常响应
    return response;
  },
  (error) => {
    // 处理响应错误
    if (error.response) {
      // 服务器响应了一个状态码
      if (error.response.status === 404) {
        console.error('请求的资源未找到 (404)'); // 打印错误信息
        // 这里可以添加更多的错误处理方式，比如提示用户
      }
    }
    return Promise.reject(error); // 继续抛出错误用于后续处理
  }
);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
5. 发送请求并处理结果

最后，你可以发送请求并进行结果处理，例如：

// 发送 GET 请求
axiosInstance.get('/path/to/resource')
  .then((response) => {
    console.log('请求成功，响应数据：', response.data);
  })
  .catch((error) => {
    console.error('请求失败：', error);
  });
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
结论

通过上述步骤，你学习了如何使用 Axios 创建请求拦截器和响应拦截器来处理 404 错误。掌握这一点不仅能帮助你更好地管理 API 请求，还能提高用户体验。希望这篇文章对你理解和处理 Axios 的 404 错误有所帮助！如果你有任何问题，欢迎随时提出。

整理的一些关于【Java】的项目学习资料（附讲解～～），需要自取：

 https://d.51cto.com/bLN8S1