在react项目中封装axios

### 封装 Axios 实现 HTTP 请求为了提高代码的可读性和复用性，在 React 项目中可以创建一个专门用于处理 HTTP 请求的服务文件。通过这种方式，可以在整个应用程序中轻松调用这些服务而无需重复编写相同的逻辑。 #### 创建 `http.js` 文件定义基础配置首先建立一个名为 `http.js` 的文件来设置全局默认选项以及拦截器等功能： ```javascript import axios from 'axios'; // 设置默认的基础URL和其他公共配置项 const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL || "https://default-base-url.com", timeout: 5000, }); // 添加请求拦截器 instance.interceptors.request.use( config => { // 可在此处添加token认证等操作 const token = localStorage.getItem('authToken'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => Promise.reject(error), ); // 添加响应拦截器 instance.interceptors.response.use( response => response.data, // 自动解包数据层 error => { // 处理错误情况下的统一提示或其他业务逻辑 console.error(`Request failed with status code ${error?.response?.status}`); throw error; }, ); export default instance; ``` #### 定义具体 API 方法接着在同一目录下新建 `api.js` 或者其他名称合适的服务模块文件，用来声明具体的接口函数： ```javascript import http from './http'; class ApiService { static async fetchHighScores() { try { let result = await http.get('/home/highscore'); return result; } catch (err) { console.error(err.message); throw err; } } /* 更多API方法 */ } export default ApiService; ``` 上述实现方式不仅让每次发起网络请求变得更加简单直观，同时也便于维护和扩展新的功能特性[^1]。当需要在一个组件内部使用时，则只需引入此服务类即可快速完成相应操作: ```jsx import React, { useEffect } from 'react'; import ApiService from '@/services/api'; function PageOne() { useEffect(() => { async function fetchData(){ try{ const data = await ApiService.fetchHighScores(); console.log(data); }catch(e){ console.warn("Failed to load high scores", e); } }; fetchData(); }, []); return ( <div>PageOne</div> ); } export default PageOne; ``` 这种模式遵循了单一职责原则，并且使得测试变得容易得多，因为现在所有的HTTP交互都被集中管理起来了[^2]。

阅读全文

在react项目中封装axios

大家在看

simulink生成代码和canoe联合仿真

电赛--2019电赛D题原理图+源程序+报告+硬件仿真.rar

IBM MQ Explore windows下安装包

蓝色科技感数据可视化Bi大屏图表展示模板深色UI界面PSD设计素材

Simulink中使用Simscape创建定制车辆模型的一组模板_matlab

最新推荐

Linux常用命令大全及其学习意义详解

压缩包中的Serv-U绿色版：解压即用的强大工具

【数据迁移性能分析】：IC617与cdb2oa工具的高效应用策略

minio docker https 设置

JS年月时间控件的设计与实现

专家解读：IC617和cdb2oa在大数据转换中的关键作用

数据中台kafka

iPhone视图切换特效及其代码实现

【IC617+cdb2oa】：数据迁移必备指南：优化、实践与挑战突破

paddleocr 内存溢出解决方案