在构建与 API 交互的 React 应用程序时，保持一种干净、有条理的方法来处理 API 调用至关重要。实现此目的的一种有效方法是创建一个集中式 API 客户端文件。在本教程中，我们将探讨如何使用 Axios（一种流行的 HTTP 客户端，用于发出请求）来构造此类文件

为什么要集中 API 调用？

集中 API 调用有几个好处：

模块化：将 API 逻辑分离到单个文件中可提高整个应用程序的模块化和可重用性。
组织：所有与 API 相关的代码都包含在一个文件中，从而更易于管理和维护。
一致性：通过在一个地方定义常见的配置和错误处理策略，您可以确保整个应用程序的一致性。

设置 Axios

首先，确保你的项目中安装了 Axios。你可以通过 npm 或 yarn 安装它：

npm install axios 

# 或者

yarn add axios

创建 API 客户端文件

让我们创建一个名为的文件apiClient.js来处理我们的 API 调用：

// apiClient.js 



import axios from  'axios' ; 



const  BASE_URL = process.env.REACT_APP_BASE_URL || 'https://api.example.com' ; const apiClient = axios.create ({ baseURL : BASE_URL , headers : { 'Content-Type' : ' application /json' , // 你可以在这里添加其他 headers，例如授权令牌  }, }); // 定义常用 API 方法const _get = ( url, config = {} ) => { return apiClient.get (url, config); }; const _delete = ( url, config = {} ) => { return apiClient.delete (url, config ); } ; const _put = ( url, data = {}, config = {} ) => { return apiClient.put (url, data, config); } ; const _post = ( url, data = {}, config = {} ) => { return apiClient.post (url, data, config); } ; // 导出 API 方法export { _get, _delete, _put, _post };

在上面的文件中：

我们创建一个具有基本 URL 和默认标头的 Axios 实例。
我们定义了对应不同端点的各种API函数。

设置环境变量：首先，您需要为不同的环境设置环境变量。通常可以通过.env为每个环境创建文件来完成此操作。例如：

.env.development：包含开发环境的变量。
.env.qa：包含 QA 环境的变量。
.env.staging：包含暂存环境的变量。
.env.production：包含生产环境的变量。

在每个.env文件中，定义你的基本 URL：

REACT_APP_BASE_URL= https://api.example.com

访问不同的环境：根据您的环境（例如，开发，QA，暂存），React 将自动加载相应的.env文件，并BASE_URL进行相应的设置。

例如，在开发过程中，React 将加载.env.development，并将BASE_URL其设置为该文件中指定的值。

类似地，在其他环境中（例如 QA、staging），React 将加载相应的.env文件。

2.在 React 组件中的使用：您可以继续在 React 组件中使用该api对象，如上例所示。基本 URL 将根据环境动态确定。

此设置允许您轻松管理不同环境的不同基本 URL，确保您的 React 应用程序根据其运行的环境与适当的后端进行通信。

在组件中使用 API 客户端

现在，让我们看看如何在 React 组件中使用此 API 客户端：

import  React , { useState, useEffect } from  'react' ; 

import { _get, _post, _put, _delete } from  './apiClient' ; // 根据需要调整路径



function  ExampleComponent ( ) { 

  const [data, setData] = useState ([]); 



  useEffect ( () => { 

    // 组件挂载时获取数据

    fetchData (); 

  }, []); 



  const  fetchData = async ( ) => { 

    try { 

      const response = await  _get ( '/data' , { headers : { Authorization : 'Bearer your_token_here' } }); 

      setData (response.data ) ; 

    } catch (error) { 

      console .error ( '获取数据时出错：' , error); // 处理错误    }   }; const addData = async ( ) => { try { const newData = { name : 'New Item' }; await _post ( '/data' , newData); fetchData (); // 添加后刷新数据    } catch (error) { console.error ( '添加数据错误：' , error); // 处理错误    }   }; const updateData = async ( id, updatedData ) => { try { await _put ( `/data/ ${id} ` , updatedData); fetchData (); // 更新后刷新数据    } catch (error) { console.error ( '更新数据错误：' , error ); // 处理错误    }   }; const deleteData = async ( id ) => { try { await _delete ( `/data/ ${id} ` ); fetchData ();

     

      // 删除后刷新数据

    } catch (error) { console.error 

      ( '删除数据错误：' , error); 

      // 处理错误

    } 

  }; 



  return ( 

    <div> 

      <h1>示例组件</h1> 

      <button onClick={addData}>添加数据</button> 

      <ul> 

        {data.map(item => ( 

          <li key={item.id}> 

            {item.name} 

            <button onClick={() => updateData(item.id, { name: '更新的项目' })}>更新</button> 

            <button onClick={() => deleteData(item.id)}>删除</button> 

          </li> 

        ))} 

      </ul> 

    </div> 

  ); 

} 



export  default  ExampleComponent ;