Axios 是一個受歡迎的 JavaScript 函式庫，用於發送 HTTP 請求。它是一個基於 Promise 的 HTTP 用戶端，可用於 JavaScript 或與其他 JavaScript 函式庫（如 Vue.js 或 React.js）搭配使用。由於其 同構 特性，Axios 可以使用相同的程式碼庫同時在用戶端和伺服器端運行。此外，它也是一個強大的工具，可與 async 結合使用以構建易於使用的 API。最重要的是，Axios 具有自動中止請求的能力，否則這將是一項艱鉅的任務。
Axios 是如何運作的？
Axios 使用預設的 promise 設定，在瀏覽器和 Node.js 中使用相同的程式碼並行運行。利用基於 Promise 的 HTTP 功能，Axios 可以執行 CRUD 操作並發送 HTTP 請求至 REST 端點。在本教學中，我們將 引導您完成在 Vue.js 中使用 Axios 設定 REST API 的步驟。
讓我們開始吧！
先決條件
要完成本教學，您必須具備以下條件：
- 已安裝 Node.js 並在您的 Ubuntu 系統上設定完成。
- 如果您使用的是 CentOS 系統，可以參考此指南來 在 CentOS 8 上安裝 Node.js.
- 基礎的 JavaScript.
步驟 1：安裝 Axios
在安裝 Axios 之前，更新您的系統套件庫非常重要，以避免錯誤或安裝失敗：
|
1 |
sudo apt-get update |
接下來，使用 npm 套件安裝 Axios：
|
1 |
npm install axios --save |
或者，您可以使用 yarn 套件管理器來安裝 Axios：
|
1 |
yarn add axios |
之後，建立一個 Vue.js 專案並在其中匯入 Axios：
|
1 |
import axios from ‘axios’; |
在下一步中，我們將使用 axios.get() 方法來獲取請求。
步驟 2：使用 GET 請求獲取數據
在這裡，我們將使用 GET 請求。看看我們如何使用 axios.get() 方法直接從方法中獲取數據：
|
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 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // 在組件建立時獲取文章。 created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // JSON 回應會被自動解析。 this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
您將會看到 async 或 await 版本：
上述程式碼將從 JSONPlaceholder 獲取文章並以無序的方式分發資料。遇到的任何類型錯誤都將顯示在另一個無序清單中。
步驟 3：使用 POST 請求推送資料
與 axios.get() 方法相反，我們現在將使用 axios.post() 方法來發送 POST 請求。看看如何應用 axios.post() 方法來獲取資料：
|
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 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // 被呼叫時將貼文推送到伺服器。 postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
您將會看到 async 或 await 版本：
上述程式碼將建立一個輸入欄位，用於將內容提交至 JSONPlaceholder。遇到的任何類型錯誤都將顯示在不同的無序清單中。
步驟 4：設定通用基礎實例
在此步驟中，我們將使用 axios.create() 方法建立一個通用基礎實例。設定通用基礎實例的目的，是在所有實例之間共享一個基礎 URL。
如果您的所有呼叫都使用通用的伺服器或標頭（例如 ），那麼通用基礎實例就會非常方便：Authorization 標頭：
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
最後，您已準備好在元件中使用 HTTP 了：
完成所有設定後，我們的 http-demo.js 建立完成了。現在，Axios 會使用相同的程式碼庫同時連接 JSONPlaceholder 與 Authorization 標頭。最棒的是，Axios 會檢索 posts、識別錯誤，並將其顯示在無序清單中。
結論
在本教學中，我們已經學習了使用 Axios 推送和拉取資料的基本知識。此外，我們建立了一個通用的基礎實例來共享通用的 URL。然而，這不應該是您學習 Axios 的終點。我們鼓勵您練習其他 Axios 方法來發送 POST, PUT, PATCH 與 DELETE 請求。深入探索 Axios 說明文件 來探索這個主題，並嘗試自己建立專案。
若要進一步了解 Axios 和 Vue.js 的相關主題，請查看這些來自 我們部落格的資源:
祝您開發愉快！
留言
目前尚無留言。成為第一個留言的人吧。