# 或者
yarn add axios

創(chuàng)建 API 客戶端文件

讓我們創(chuàng)建一個名為的文件apiClient.js來處理我們的 API 調(diào)用：

// 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，例如授權(quán)令牌  }, }); // 定義常用 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); } ; // 導(dǎo)出 API 方法export { _get, _delete, _put, _post };

在上面的文件中：

我們創(chuàng)建一個具有基本 URL 和默認(rèn)標(biāo)頭的 Axios 實(shí)例。
我們定義了對應(yīng)不同端點(diǎn)的各種API函數(shù)。

設(shè)置環(huán)境變量：首先，您需要為不同的環(huán)境設(shè)置環(huán)境變量。通?？梢酝ㄟ^.env為每個環(huán)境創(chuàng)建文件來完成此操作。例如：

.env.development：包含開發(fā)環(huán)境的變量。
.env.qa：包含 QA 環(huán)境的變量。
.env.staging：包含暫存環(huán)境的變量。
.env.production：包含生產(chǎn)環(huán)境的變量。

在每個.env文件中，定義你的基本 URL：

REACT_APP_BASE_URL= https://api.example.com

訪問不同的環(huán)境：根據(jù)您的環(huán)境（例如，開發(fā)，QA，暫存），React 將自動加載相應(yīng)的.env文件，并BASE_URL進(jìn)行相應(yīng)的設(shè)置。

例如，在開發(fā)過程中，React 將加載.env.development，并將BASE_URL其設(shè)置為該文件中指定的值。

類似地，在其他環(huán)境中（例如 QA、staging），React 將加載相應(yīng)的.env文件。

2.在 React 組件中的使用：您可以繼續(xù)在 React 組件中使用該api對象，如上例所示?；?URL 將根據(jù)環(huán)境動態(tài)確定。

此設(shè)置允許您輕松管理不同環(huán)境的不同基本 URL，確保您的 React 應(yīng)用程序根據(jù)其運(yùn)行的環(huán)境與適當(dāng)?shù)暮蠖诉M(jìn)行通信。

在組件中使用 API 客戶端

現(xiàn)在，讓我們看看如何在 React 組件中使用此 API 客戶端：

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

import { _get, _post, _put, _delete } from  './apiClient' ; // 根據(jù)需要調(diào)整路徑



function  ExampleComponent ( ) { 

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



  useEffect ( () => { 

    // 組件掛載時獲取數(shù)據(jù)

    fetchData (); 

  }, []); 



  const  fetchData = async ( ) => { 

    try { 

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

      setData (response.data ) ; 

    } catch (error) { 

      console .error ( '獲取數(shù)據(jù)時出錯：' , error); // 處理錯誤    }   }; const addData = async ( ) => { try { const newData = { name : 'New Item' }; await _post ( '/data' , newData); fetchData (); // 添加后刷新數(shù)據(jù)    } catch (error) { console.error ( '添加數(shù)據(jù)錯誤：' , error); // 處理錯誤    }   }; const updateData = async ( id, updatedData ) => { try { await _put ( /data/ ${id}  , updatedData); fetchData (); // 更新后刷新數(shù)據(jù)    } catch (error) { console.error ( '更新數(shù)據(jù)錯誤：' , error ); // 處理錯誤    }   }; const deleteData = async ( id ) => { try { await _delete ( /data/ ${id}  ); fetchData ();

      // 刪除后刷新數(shù)據(jù)
    } catch (error) { console.error 
      ( '刪除數(shù)據(jù)錯誤：' , error); 
      // 處理錯誤
    } 
  }; 

  return ( 
    <div> 
      <h1>示例組件</h1> 
      <button onClick={addData}>添加數(shù)據(jù)</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 ;

在 Axios 中，config參數(shù)允許您為 HTTP 請求傳遞額外的配置。一些常見的配置包括標(biāo)頭、查詢參數(shù)、請求超時、身份驗證令牌。

注意：使用創(chuàng)建 Axios 實(shí)例時axios.create()，baseURL選項設(shè)置為BASE_URL。這意味著使用此 Axios 實(shí)例發(fā)出的所有請求都將在其 URL 前加上基本 URL 前綴。

例如，如果你_get('/data')從調(diào)用ExampleComponent，Axios 將發(fā)送一個 GET 請求到'https://api.example.com/data'

結(jié)論

使用 Axios 在 React 應(yīng)用程序中集中 API 調(diào)用提供了一種簡潔、有條理的方法來管理 API 邏輯。通過創(chuàng)建集中式 API 客戶端文件，您可以在代碼庫中實(shí)現(xiàn)模塊化、組織性和一致性。這種方法簡化了維護(hù)并促進(jìn)了整個應(yīng)用程序的代碼重用。