許多網路應用程式在開發的某個階段，都需要與 REST API 進行介接。對於 React 架構的網路應用程式，我們可以使用 Axios，這是一個輕量級的 HTTP 用戶端，基於 $http 服務（源自 Angular.js v1.x）。其功能類似於 JavaScript’s 原生的 Fetch API.
。Axios 是基於 Promise 的，這讓我們能夠結合 JavaScript 的 async 與 await，以撰寫更具可讀性的同步程式碼。它還支援攔截器和取消請求。此外，它還內建了防止跨站請求偽造的用戶端防護。
在本指南中，我們將展示 如何使用 Axios 來存取熱門的 JSON Placeholder API，並在一個 React 範例應用程式中進行示範。您可以透過此教學深入了解 the JSON format in JavaScript from this tutorial.
先決條件
要完成本指南中示範的步驟，您需要準備以下組件：
- 一部設定妥當的 Ubuntu 伺服器。以下是 setting up your own Ubuntu server on CloudSigma.
- 已安裝最新版本的 Node.js。請參考 how to install Node.js on Ubuntu.
- 一個使用 Create React App 建立的新 React 專案。建議先閱讀並執行此 guide on setting up a React project using Create React App.
- 對 HTML, CSS 和 JavaScript.
步驟 1：在 React 專案中安裝 Axios
Axios 可以直接作為 npm 模組使用。請參考 Axios on npm。我們只需要建立一個 React 專案並安裝 Axios 套件即可。
以下 npx 指令將執行 create-react-app 來建立一個新的 React 專案。專案名稱將用於為該專案建立一個專屬目錄。在這裡，我們將專案命名為 react-axios-demo。執行以下指令：
|
1 |
npx create-react-app react-axios-demo |
將目前目錄切換至新建立的專案目錄：
|
1 |
cd react-axios-demo/ |
接下來，執行 npm install 指令來安裝 Axios。如果未指定版本，則 npm 將會自動下載並安裝最新版本的 Axios：
|
1 |
npm install axios |
我們的專案現在已經可以使用 Axios 了！是時候開始實際應用它的功能了。
步驟 2：建構 GET 請求
在此步驟中，我們將展示如何建立一個使用 Axios 發送 GET 請求的新組件。
首先，建立一個會顯示姓名列表的新組件 PersonList。建立一個專屬目錄來存放該組件：
|
1 |
mkdir -pv src/components |
接下來，建立檔案 PersonList.js :
|
1 |
touch PersonList.js |
在文字編輯器中開啟該檔案。為了方便與易讀性，我們使用 Visual Studio Code。輸入以下 JavaScript 程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React from 'react'; import axios from 'axios'; export default class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <ul> { this.state.persons .map(person => <li key={person.id}>{person.name}</li> ) } </ul> ) } } |
說明：
-
我們匯入了 React 和 Axios，以便在組件中同時使用它們。
-
我們掛鉤到 componentDidMount 生命週期掛鉤並發送 GET 請求。
您可以使用 axios.get(<url>) 從 API 端點獲取 Promise（會傳回一個回應物件）。在該回應物件中，包含我們所需的資料。接著我們將其指派給 person 的值。我們也可以收集有關請求的其他資訊，例如在 res.status 下的狀態碼，或是來自 res.request.
接下來，我們需要將我們的元件新增到主 App.js 檔案。新增以下程式碼：
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
此步驟的設定已完成。您現在可以執行應用程式並使用您喜愛的瀏覽器進行測試。啟動開發伺服器：
|
1 |
npm start |
如我們所見，輸出顯示了隨機排序的人名清單：
步驟 3：構建 POST 請求
在本節中，我們將展示使用 Axios 來執行另一個稱為 POST 的 HTTP 請求方法。為了演示這一點，我們的目標是在我們的 React 專案中建立一個名為 PersonAdd.
建立檔案 PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
然後，在文字編輯器中開啟該檔案並輸入以下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd extends React.Component { state = { name: '' } handleChange = event => { this.setState({ name: event.target.value }); } handleSubmit = event => { event.preventDefault(); const user = { name: this.state.name }; axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> Person Name: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Add</button> </form> </div> ) } } |
在此程式碼中，我們獲取使用者輸入並將內容 POST 到 API。在 handleSubmit 函式中，我們阻止了表單的預設行為，並將 state 更新為使用者輸入。當使用 POST 時，它會傳回相同的回應物件。我們可以在 then 呼叫中使用該物件。為了完成 POST 請求，我們正在擷取使用者輸入，並將其與 POST 請求一起加入。它會給我們一個回應。我們使用 console.log 記錄該回應。它應該會在表單中顯示 user 輸入。
接下來，將元件新增至 App.js。完整程式碼應該如下所示：
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
現在，是時候測試變更了。啟動開發伺服器：
|
1 |
npm start |
在網頁瀏覽器上檢查變更：
步驟 4：構建 DELETE 請求
在本節中，我們將演示如何在 axios.delete 的幫助下從 API 刪除項目，並使用 URL 作為參數。為了演示，請建立元件 PersonRemove。建立檔案 PersonRemove.js，位於 src/components 目錄中：
|
1 |
touch src/components/PersonRemove.js |
之後，在文字編輯器中開啟該檔案並新增以下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove extends React.Component { state = { id: '' } handleChange = event => { this.setState({ id: event.target.value }); } handleSubmit = event => { event.preventDefault(); axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label> 人員 ID: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">刪除</button> </form> </div> ) } } |
在這裡， res 物件提供了有關該請求的資訊。我們接著可以在表單提交後使用 console.log。
接下來，將組件實作到 App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
是時候再次測試我們的程式碼了。啟動伺服器：
|
1 |
npm start |
您應該會看到一個新表單，它可以接收用戶的姓名並將其從清單中移除：
步驟 5：在 Axios 中套用基礎實例
現在，我們將使用 Axios 基礎實例。在這裡，我們可以定義 URL 和其他設定元素。若要實作它，請建立一個獨立的檔案 api.js:
|
1 |
touch src/api.js |
在文字編輯器中打開它並輸入以下程式碼：
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
設定完成後，我們就可以在 PersonRemove 組件中使用它。程式碼看起來會像這樣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
在這裡，http://jsonplaceholder.typicode.com/ 被設定為基礎 URL。現在，我們每次存取 API 的端點時，不再需要使用完整的 URL。
步驟 6：實作 async 和 await
在本節中，我們將看看如何實作 async 和 await 來處理 promise。 await 關鍵字會解析 promise 並傳回 value。我們可以將此 value 指派給變數，以便更方便地使用。
以下是更新後的 PersonRemove.js 程式碼看起來的樣子：
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
在這裡，我們已取代了 .then()。一旦 promise 解決（resolved）後，我們將該值儲存在變數 response.
結語
在本教學中，我們探索了使用 Axios 處理 REST API 的各種範例。這些程式碼展示了如何建立 HTTP 請求和處理回應。
有興趣學習更多關於 JavaScript 的內容嗎？請查看我們針對各種 JavaScript 概念和功能所寫的其他初學者指南，例如 日期和時間, 字串操作, 類別，以及 物件.
祝您編寫程式愉快！
留言
目前尚無留言。成為第一個留言的人吧。