(九）axios的使用

1、axios 的基本使用

1.1、簡介

在 Web 開發的演進歷程中，數據請求方式的變革至關重要。回溯早期，舊瀏覽器在向服務器請求數據時，存在嚴重弊端。由于返回的是整個頁面數據，每次請求都會導致頁面強制刷新，這不僅極大地影響了用戶體驗，還造成了網絡資源的極大浪費。畢竟，多數情況下我們僅僅需要更新頁面的部分內容，因此，異步網絡請求技術應運而生，Ajax 便是其中的典型代表。

Ajax(Asynchronous JavaScript and XML)：作為異步網絡請求的先驅，它實現了頁面無刷新請求數據的功能，讓網頁能夠在不重新加載整個頁面的情況下與服務器進行數據交互。不過，實現 ajax 的方式雖多，但各有優劣。原生的 XMLHttpRequest 雖能實現基本的異步請求，但配置和調用方式極為繁瑣，開發者需要編寫大量復雜的代碼來處理各種細節，如創建請求對象、設置請求頭、處理響應等，這使得實現異步請求變得十分困難。

而 jQuery 的 ajax 方法極大地簡化了這一過程，它提供了簡潔易用的接口，讓開發者能夠輕松地進行異步請求。然而，引入整個 jQuery 框架只為使用 ajax 功能，無疑會增加項目的體積和復雜度，這在追求高效和輕量化的現代 Web 開發中并非最佳選擇。

Axios（ajax i/o system）：它本質上是對原生 XMLHttpRequest 的封裝，卻為開發者帶來了全新的體驗。它可同時應用于瀏覽器和 nodejs 的 HTTP 客戶端，基于 Promise 的特性使其完美符合最新的 ES 規范。這意味著在使用 axios 時，開發者可以利用 Promise 的鏈式調用和簡潔的錯誤處理機制，讓異步代碼的編寫更加優雅和高效。

axios 具備以下顯著特點：

  • 在瀏覽器中創建 XMLHttpRequest 請求：在實際的電商項目中，商品詳情頁往往需要展示商品的詳細信息、用戶評價等。使用 axios，開發者可以輕松地向服務器發送請求，獲取這些數據，并在不刷新頁面的情況下動態更新頁面內容，為用戶提供流暢的瀏覽體驗。
  • 在 node.js 中發送 http 請求：以 Node.js 搭建的后端服務為例，當需要調用其他 API 接口獲取數據時，axios 提供了簡單便捷的方式。比如，在一個內容管理系統的后端，需要從第三方的圖片存儲服務獲取圖片信息，axios 就能派上用場。
  • 支持 Promise API：在涉及多個異步請求的場景中，axios 對 Promise API 的支持尤為強大。例如，在一個社交應用中，需要同時獲取用戶的基本信息、好友列表和動態消息，通過 Promise.all () 方法結合 axios，就可以并行處理這些請求，大大提高了數據獲取的效率。
  • 攔截請求和響應：在許多需要用戶認證的應用中，請求攔截器可以在請求發送前檢查用戶是否登錄，并在請求頭中添加認證信息，確保請求的安全性。而響應攔截器則可以在接收到響應后，對數據進行統一的格式轉換或錯誤處理。
  • 轉換請求和響應數據：當服務器返回的數據格式不符合前端需求時，響應攔截器可以對數據進行格式轉換。比如，服務器返回的時間格式是時間戳，而前端需要展示成具體的日期時間格式，就可以在響應攔截器中進行轉換。
  • 取消請求：在搜索功能中，用戶可能會頻繁輸入關鍵詞，導致多次發送請求。此時，使用 axios 的取消請求功能，可以取消之前未完成的請求，避免資源浪費，提高應用的性能。
  • 自動轉換 JSON 數據：在前后端數據交互中，JSON 是最常用的數據格式之一。axios 能夠自動處理 JSON 數據的解析和序列化，無需開發者手動操作，大大提高了開發效率。

1.2、安裝

1.2.1、通過 cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

這種方式的優勢在于簡單快捷，無需進行復雜的安裝和配置步驟。對于一些小型項目或快速原型開發來說，直接通過 CDN 引入 axios，可以迅速開始使用其功能。例如，在一個簡單的個人博客頁面中，想要實現文章數據的動態加載，使用 CDN 引入 axios，就能快速完成數據請求和展示的功能。

1.3、基本使用

1.3.1、準備服務器

在模擬服務器時，json-server 是一個非常實用的工具。

  • 安裝 json-server：
npm install -g json-server

通過全局安裝 json-server，我們可以在任何項目中方便地使用它。安裝完成后，在命令行中就可以直接調用 json-server 命令來啟動服務器。

  • 創建數據源：
    在空文件夾下創建 JSON 文件作為數據源，例如db.json，示例數據如下：
{"list": [{"id": "1","name": "唐僧","age": 20,"address": "東土大唐"},{"id": "2","name": "孫悟空","age": 500,"address": "花果山"},{"id": "3","name": "豬八戒","age": 330,"address": "高老莊"},{"id": "4","name": "沙悟凈","age": 200,"address": "流沙河"},{"id": "5","name": "紅孩兒","age": 10,"address": "火焰山"}]
}

這個數據源可以用于模擬各種數據請求場景，比如在一個角色管理系統中，我們可以通過修改db.json中的數據，來模擬不同角色的數據變化，進而測試前端頁面的數據展示和交互功能。

  • 啟動服務器：
    有多種啟動方式，每種方式都有其特點和適用場景。
    • 方式一：
json-server  db.json

這是最基本的啟動方式，簡單直接，適用于快速啟動服務器進行初步測試。

  • 方式二：
json-server --watch db.json

--watch參數的作用非常強大，它可以實時監控文件的變化。當db.json中的數據發生修改時，服務器會自動檢測到并更新數據，無需手動重啟服務器。這在開發過程中頻繁修改數據時非常方便，大大提高了開發效率。

  • 方式三：
    在與db.json同級目錄創建package.json文件，配置別名：
{"scripts":{"mock":"json-server --watch db.json --port 3001"}
}

然后通過npm run mock啟動。這種方式在團隊開發中尤為重要，它可以統一項目的啟動命令，減少因啟動方式不一致而導致的問題。同時，通過配置--port參數，可以指定服務器運行的端口，避免端口沖突。

1.3.2、各種請求方式
1.3.2.1、get 請求

get 請求主要用于獲取數據，請求指定的信息并返回實體對象。在下面的示例中，展示了三種處理請求結果的方法，其中推薦使用try...catch方式，因為它的代碼結構更加清晰，錯誤處理更加直觀。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> --><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style>
</head><body><div id="warp"><button onclick="getInfo()">get請求</button><ul class="showUser"></ul></div><script>// get請求async function getInfo() {// 請求結果處理方法一：// axios.get("http://localhost:3000/list").then(//     (res) => {//         // 將請求到的結果進行渲染//         render(res.data);//     },//     (err) => {//         console.log(err);//     }// );// 請求結果處理方法二：// axios//  .get("http://localhost:3000/list")//  .then((res) => {//         // 將請求到的結果進行渲染//         render(res.data);//     })//  .catch((err) => {//         console.log(err);//     });// 請求結果處理方法三：推薦使用第三種try {let res = await axios.get("http://localhost:3000/list");render(res.data);} catch (error) {console.log(err);}}// 渲染函數function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>刪除</a></li>`;});showUser.innerHTML = str;}</script>
</body></html>

此外，get 請求還可以攜帶參數，有以下兩種常見方式：

// get請求帶參數方式一
// try {
//   let res = await axios.get("http://localhost:3000/list?id=1");
//   render(res.data);
// } catch (error) {
//   console.log(err);
// }
// get請求帶參數方式二
try {let res = await axios.get("http://localhost:3000/list", {params: {id: 2,},});render(res.data);
} catch (error) {console.log(err);
}

在實際應用中，比如在一個商品查詢功能中，我們可以通過傳遞不同的參數，獲取不同商品的詳細信息。

1.3.2.2、post 請求：

post 請求通常用于向指定資源提交數據，如表單提交或文件上傳。在下面的示例中，通過axios.post方法提交數據，提交后重新獲取數據并渲染，展示了如何在實際應用中使用 post 請求進行數據添加操作。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style>
</head><body><div id="warp"><button onclick="postInfo()">post請求</button><ul class="showUser"></ul></div><script>// post請求async function postInfo() {await axios.post("http://localhost:3000/list",{name: "蜘蛛精",age: 200,address: "盤絲洞",});// 重新獲取數據，渲染let res = await axios.get("http://localhost:3000/list");render(res.data);// console.log(res.data);}// 渲染函數function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>刪除</a></li>`;});showUser.innerHTML = str;}</script>
</body></html>

在一個用戶注冊功能中，就可以通過 post 請求將用戶填寫的注冊信息提交到服務器，實現用戶注冊的功能。

1.3.2.3、put 請求：

put 請求用于更新數據，從客戶端向服務器傳送的數據會取代指定文檔的內容。需要特別注意的是，put 請求會把更新的數據完全替代原數據，如果只修改了部分數據，原數據其他內容都會丟失。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style>
</head><body><div id="warp"><button onclick="putInfo()">put請求-修改數據</button><ul class="showUser"></ul></div><script>// put請求async function putInfo() {let res = await axios.put("http://localhost:3000/list/1", {name: "玉皇大帝",});// 渲染getData()}// 重新獲取數據，渲染async function getData() {let res = await axios.get("http://localhost:3000/list");render(res.data);}// 渲染函數function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>刪除</a></li>`;});showUser.innerHTML = str;}</script>
</body></html>

在一個用戶信息修改功能中，如果使用 put 請求，一定要確保提交的數據完整，否則可能會導致部分數據丟失。

1.3.2.4、patch 請求：

patch 請求也是用于更新數據，它是對 put 方法的補充，主要用于對已知資源進行局部更新。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style>
</head><body><div id="warp"><button onclick="patchInfo()">patch請求-修改數據</button><ul class="showUser"></ul></div><script>// patch請求async function patchInfo() {let res = await axios.patch("http://localhost:3000/list/2", {name: "王母娘娘",});// 渲染getData();}// 重新獲取數據，渲染async function getData() {let res = await axios.get("http://localhost:3000/list");render(res.data);}// 渲染函數function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>刪除</a></li>`;});showUser.innerHTML = str;}</script>
</body></html>

在一個商品庫存更新功能中，我們可能只需要更新庫存數量，而不影響其他商品信息，這時使用 patch 請求就非常合適。

1.3.2.5、delete 請求：

delete 請求用于請求服務器刪除指定的數據。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script><style>#warp {width: 400px;margin: 50px auto;}.showUser {width: 400px;margin: 10px auto;height: 260px;border: 1px solid red;}li {line-height: 2;background-color: pink;margin: 10px;}</style></head><body><div id="warp"><button onclick="deleteInfo()">delet請求-修改數據</button><ul class="showUser"></ul></div><script>// delete請求async function deleteInfo() {let res = await axios.delete("http://localhost:3000/list/1");// 渲染getData();}// 重新獲取數據，渲染async function getData() {let res = await axios.get("http://localhost:3000/list");render(res.data);}// 渲染函數function render(data) {let showUser = document.querySelector(".showUser");let str = "";data.forEach((item) => {str += `<li>${item.name}<a href='#'>刪除</a></li>`;});showUser.innerHTML = str;}</script></body>
</html>
1.3.3、axios 的配置

配置的優先級為：請求配置 > 實例配置 > 全局配置，這種優先級設置讓開發者能靈活地根據不同場景對 axios 請求進行配置 。

  • 全局配置：通過axios.defaults進行全局配置，這些配置會應用到所有的 axios 請求中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script>
</head>
<body><button id="btn" onclick="getData()">發送請求</button><script>//配置全局的超時時長axios.defaults.timeout = 2000;//配置全局的基本URLaxios.defaults.baseURL = "http://localhost:3000";async function getData() {try {let res1 = await axios.get("/list");let res2 = await axios.get("/user");console.log(res1.data);console.log(res2.data);} catch (error) {console.log(error);}}</script>
</body>
</html>

在一個多頁面應用中，可能所有頁面的請求都需要設置相同的超時時間和基本 URL，使用全局配置就能很方便地實現這一點，避免在每個請求中重復設置。

  • 實例配置：在大型項目中，不同的業務模塊可能有不同的請求配置需求，為避免沖突，可創建 axios 的實例并進行配置。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script>
</head>
<body><button id="btn" onclick="getData()">發送請求</button><script>async function getData() {// 創建實例1，創建同時配置let instance = axios.create({baseURL: "http://localhost:3000",timeout: 2000,});let res = await instance.get("/list");console.log(res.data);// 創建實例2，現創建，再配置let instance2 = axios.create();instance2.defaults.timeout = 2;instance2.defaults.baseURL = "http://localhost:3000";let res2 = await instance.get("/user");console.log(res2.data);}</script>
</body>
</html>

例如，一個電商項目中，商品相關的請求和用戶相關的請求可能需要不同的超時時間或請求頭設置，通過創建不同的實例就可以分別進行配置，互不干擾。

axios 實例常用配置：

  • baseURL：請求的域名，基本地址，類型：String，用于設置請求的基礎路徑。在前后端分離的項目中，根據不同的環境（開發、測試、生產）設置不同的baseURL，方便切換不同環境的接口地址。

  • timeout：請求超時時長，單位 ms，類型：Number，用于設置請求的超時時間。在網絡不穩定的情況下，合理設置超時時間可避免請求長時間等待，提升用戶體驗。

  • url：請求路徑，類型：String，用于設置具體的請求路徑。根據不同的業務需求，設置不同的請求路徑，如獲取用戶信息的路徑為/user，獲取訂單信息的路徑為/order。

  • method：請求方法，類型：String，如GET、POST、PUT、PATCH、DELETE等。根據不同的業務操作，選擇合適的請求方法，如獲取數據用GET，提交數據用POST。

  • headers：設置請求頭，類型：Object，用于設置請求的頭部信息。比如在請求頭中添加Content-Type，指定請求體的數據格式，或者添加認證信息。

  • params：請求參數，將參數拼接在 URL 上，類型：Object，用于傳遞查詢參數。在搜索功能中，可通過params傳遞搜索關鍵詞。

  • data：請求參數，將參數放到請求體中，類型：Object，用于傳遞請求體數據。在提交表單數據時，可將表單數據放在data中。

  • 請求配置：可以在單個請求中進行配置，這種方式可以針對特定請求進行個性化配置，覆蓋全局配置和實例配置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script>
</head>
<body><button id="btn" onclick="getData()">發送請求</button><script>async function getData() {let res = await axios.get("http://localhost:3000/list", {timeout: 2000,});console.log(res.data);}</script>
</body>
</html>

比如在一個需要快速獲取數據的場景中，可單獨設置某個請求的超時時間為更短的值，以滿足特定的業務需求。

1.3.4、axios 的攔截器

axios 提供了兩大類攔截器，分別是請求方向的攔截（成功請求，失敗請求）和響應方向的攔截（成功的，失敗的）。攔截器在網絡請求過程中扮演著非常重要的角色，它可以在發起請求或者響應時對操作進行處理。

  • 請求攔截器：在發送請求前進行一系列處理。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script>
</head>
<body><button id="btn" onclick="getData()">發送請求</button><script>// 請求攔截器async function getData() {axios.interceptors.request.use((config) => {// 發生請求前的一系列的處理console.log("開啟加載動畫");console.log("認證是否有token，如果沒有，要去登錄");return config; //攔截后的放行},(err) => {// 請求錯誤處理return Promise.reject(err);});let res = await axios.get("http://localhost:3000/list");console.log(res.data);}</script>
</body>
</html>

在一個需要用戶登錄才能訪問某些功能的應用中，可在請求攔截器中檢查用戶是否登錄，未登錄則跳轉到登錄頁面；還可以在請求頭中添加一些通用的參數，如版本號、設備信息等。

  • 響應攔截器：在接收到響應后進行一系列處理。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script>
</head>
<body><button id="btn" onclick="getData()">發送請求</button><script>// 響應攔截器async function getData() {axios.interceptors.response.use((config) => {// 數據回來前的一系列的處理console.log("關閉加載動畫");console.log("對數據進行一些數據");return config.data; //攔截后的放行},(err) => {// 響應錯誤處理return Promise.reject(err);});let res = await axios.get("http://localhost:3000/list");console.log(res.data);}</script>
</body>
</html>

在一個返回數據需要格式化的場景中，可在響應攔截器中對數據進行格式化處理；或者根據響應狀態碼進行統一的錯誤提示，如 404 提示頁面未找到，500 提示服務器錯誤等。

  • 取消攔截：可以取消攔截器。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><script src="../js/axios.js"></script>
</head>
<body><button id="btn" onclick="getData()">發送請求</button><script>// 請求攔截器async function getData() {let instance = axios.create();instance.interceptors.request.use((config) => {// 發生請求前的一系列的處理console.log("開啟加載動畫");console.log("認證是否有token，如果沒有，要去登錄");return config; //攔截后的放行},(err) => {// 請求錯誤處理return Promise.reject(err);});// 取消攔截axios.interceptors.request.eject(instance);let res = await axios.get("http://localhost:3000/list");console.log(res.data);}</script>
</body>
</html>

在某些特殊的測試場景中，或者臨時需要繞過某些攔截器的處理時，可以使用取消攔截功能 。

2、Vue 中 axios 的使用

2.1、基本使用
  • npm 安裝：在終端使用npm install axios安裝 axios，這是在 Vue 項目中使用 axios 的常見方式。安裝完成后，axios 會被添加到項目的node_modules目錄中，項目可以引入并使用它。
  • ** 在 Vue 原型上配置：在項目的文件中引入，并將其掛載到原型上，這樣在組件中就可以通過axios` 來使用 axios。
// 導入axios
import axios from 'axios'
// 將axios放到Vue原型上，這樣vm，vc身上就都有axios了
Vue.prototype.$axios=axios

通過這種方式，在 Vue 組件中可以方便地調用 axios 進行數據請求，無需在每個組件中重復引入 axios。

  • 在組件中使用：在組件中通過this.$axios發送請求。
<button @click="getDate">點擊發送請求</button>
<script>
export default {name: 'App',methods: {async getDate() {let res = await this.$axios.get('http://localhost:3000/list')console.log(res.data);}}
}
</script>

在一個商品列表組件中，可通過點擊按鈕，使用this.$axios獲取商品列表數據并展示在頁面上。

2.2、一次封裝

如果多個組件都需要發送請求，且每次請求前都要進行一些驗證處理等，可以進行簡單封裝。

  • 封裝 request.js：在src/utils創建request.js，創建 axios 實例并進行配置，添加請求攔截器和響應攔截器。
/* 封裝axios用于發送請求 */
import axios from "axios";/*
(1)request 相當于 Axios 的實例對象
(2)為什么要有request,而不是直接用axios* 項目開發中，有可能會有兩個基地址* 不同的接口配置不同（有的要token,有的不要token）
*/
const request = axios.create({baseURL: "http://localhost:3000", // 設置基地址timeout: 2000, // 請求超時：當2s沒有響應就會結束請求
});// 添加請求攔截器，一下內容是axios的攔截器，可以不用寫
request.interceptors.request.use(function (config) {// 發請求前做的一些處理，數據轉化，配置請求頭，設置token,設置loading等，根據需求去添加// 例如1config.data = JSON.stringify(config.data); // 數據轉化,也可以使用qs轉換// 例如2config.headers = {"Content-Type": "application/x-www-form-urlencoded", // 配置請求頭};// 例如3//注意使用token的時候需要引入cookie方法或者用本地localStorage等方法，推薦js-cookieconst token = getCookie("名稱"); // 這里取token之前，你肯定需要先拿到token,存一下if (token) {config.params = { token: token }; // 如果要求攜帶在參數中config.headers.token = token; // 如果要求攜帶在請求頭中}return config; //攔截后的放行}, function (error) {// 對請求錯誤做些什么return Promise.reject(error);}
);// 添加響應攔截器
request.interceptors.response.use(function (response) {// 對響應數據做點什么console.log('關閉請求數據動畫');console.log('對數據進行處理');return response.data; //只要響應對象中的數據},function (error) {// 對響應錯誤做點什么return Promise.reject(error);}
);export default request;

在一個需要用戶登錄的應用中，可在請求攔截器中統一處理 token 驗證，確保每個請求都攜帶有效的認證信息；在響應攔截器中統一處理錯誤提示，根據不同的錯誤類型給用戶友好的提示。

  • 組件中使用：在組件中引入封裝后的request。
<script>import request from '../utils/request'export default {name: 'ShowList',methods: {async getList() {// 基本路徑已經配置過let res = await request.get('/list')//這里的res也是響應攔截器里處理之后的結果console.log(res);}}}
</script>
<script>
import request from '@/utils/request';
export default {name: 'ShowUser',methods: {async getUser() {let res = await request.get('/user')console.log(res);}}}
</script>

在一個用戶管理組件中，可通過引入request，方便地發送獲取用戶列表、添加用戶、修改用戶等請求，并且無需重復編寫請求攔截和響應處理的代碼。

2.3、二次封裝

項目中頁面較多，每個頁面多次請求時，將請求寫在頁面中難以維護，可再次進行封裝。

  • src/apis/showList.js：導入一次封裝的request，封裝具體的請求函數。
// 導入一次封裝的request
import request from "@/utils/request";
// 請求list數據
export function getListInfo1() {return request.get("/list");
}
// 請求user數據
export function getUserInfo1() {return request.get("/user");
}

在一個電商項目中，可在src/apis目錄下創建多個文件，分別封裝商品、訂單、用戶等相關的請求函數，使代碼結構更加清晰，便于維護和管理。

  • showList.vue：在組件中引入封裝后的請求函數。
<script>
import { getListInfo1, getUserInfo1 } from '../apis/showList'
export default {name: 'ShowList',methods: {async getList1() { //	調用請求函數let res = await getListInfo1()console.log(res);},async getUser1() {let res = await getUserInfo1()console.log(res);}}
}
</script>

在一個商品列表頁面中，可通過調用getListInfo1獲取商品列表數據，在用戶詳情頁面中，可通過調用getUserInfo1獲取用戶詳情數據，進一步提高代碼的復用性和可維護性。

3、axios 小案例

3.1、表格的添加

在實際項目中，表格添加功能通常涉及到數據的提交和更新。使用 axios 發送 post 請求，將用戶輸入的數據提交到服務器，服務器處理后返回新的數據列表，再通過 axios 獲取最新數據并重新渲染表格，展示添加后的數據。在一個員工管理系統中，可通過表格添加功能，添加新員工的信息，提交后刷新表格，展示最新的員工列表。用戶在前端界面填寫新員工的姓名、年齡、職位等信息，點擊提交按鈕后，axios 將數據發送到服務器，服務器將數據保存到數據庫并返回更新后的員工列表數據，前端接收到數據后重新渲染表格，讓用戶看到最新的員工信息。

3.2、天氣案例

在天氣案例中，通過 axios 向天氣 API 發送 get 請求，獲取城市的天氣信息，如溫度、濕度、天氣狀況等。可以根據不同的天氣狀況展示相應的圖標和提示信息，為用戶提供直觀的天氣展示。同時，可以設置緩存機制，避免頻繁請求 API，提高用戶體驗。比如在一個天氣預報應用中，可根據獲取的天氣狀況，展示對應的晴天、雨天、多云等圖標，同時設置緩存，在一定時間內不再重復請求相同城市的天氣數據。當用戶打開應用時，axios 向天氣 API 發送請求獲取當前城市的天氣信息，將溫度、濕度等數據展示在頁面上，并根據天氣狀況展示對應的圖標。如果用戶在短時間內多次打開應用，應用會先檢查緩存中是否有最新的天氣數據，如果有則直接展示，避免重復請求 API，減少網絡流量和提高響應速度。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/896398.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/896398.shtml
英文地址，請注明出處：http://en.pswp.cn/news/896398.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【MySQL篇】數據庫基礎

【MySQL篇】數據庫基礎

目錄 1&#xff0c;什么是數據庫&#xff1f; 2&#xff0c;主流數據庫 3&#xff0c;MySQL介紹 1&#xff0c;MySQL架構 2&#xff0c;SQL分類 3&#xff0c;MySQL存儲引擎 1&#xff0c;什么是數據庫&#xff1f; 數據庫&#xff08;Database&#xff0c;簡稱DB&#xf…
閱讀更多...
網絡安全事件研判

網絡安全事件研判

&#x1f345; 點擊文末小卡片 &#xff0c;免費獲取網絡安全全套資料&#xff0c;資料在手&#xff0c;漲薪更快 研判&#xff08;入侵檢測&#xff09; 研判我理解為人工層面對入侵檢測事件進行再分析&#xff0c;即借助已有的設備告警根據經驗判斷是否為真實action 研判工作…
閱讀更多...
python整理文件下

python整理文件下

我們使用 os.path.join() 函數拼接出文件要移動的目標地址。 并使用 os.path.exists() 函數配合 not 關鍵字找到未創建的文件夾。 這節課&#xff0c;我們會先創建文件夾&#xff0c;然后再移動文件到目標文件夾。如果文件夾不存在&#xff0c;我們需要先創建文件夾&#xff…
閱讀更多...
hackmyvm-buster

hackmyvm-buster

題目地址 信息收集 主機發現 ┌──(root?kali)-[/home/kali] └─# arp-scan -I eth1 192.168.56.0/24 Interface: eth1, type: EN10MB, MAC: 00:0c:29:34:da:f5, IPv4: 192.168.56.103 WARNING: Cannot open MAC/Vendor file ieee-oui.txt: Permission denied WARNING: C…
閱讀更多...
FS800DTU聯動OneNET平臺數據可視化View

FS800DTU聯動OneNET平臺數據可視化View

目錄 1 前言 2 環境搭建 2.1 硬件準備 2.2 軟件環境 2.3 硬件連接 3 注冊OneNET云平臺并建立物模型 3.1 參數獲取 3.2 連接OneNET 3.3上報數據 4 數據可視化View 4.1 用戶信息獲取 4.2 啟用數據可視化View 4.3 創建項目 4.4 編輯項目 4.5 新增數據源 4.6 數據過濾器配置 4.6 項…
閱讀更多...
Dockerfile 中的 COPY 語句：作用與使用詳解

Dockerfile 中的 COPY 語句：作用與使用詳解

在 Docker 的構建過程中&#xff0c;Dockerfile 是一個核心文件&#xff0c;它定義了鏡像的構建步驟和內容。其中&#xff0c;COPY 語句是一個非常重要的指令&#xff0c;用于將文件或目錄從構建上下文&#xff08;通常是 Dockerfile 所在的目錄及其子目錄&#xff09;復制到容…
閱讀更多...
大白話Vuex 核心概念（state、mutations、actions）的使用案例與原理

大白話Vuex 核心概念（state、mutations、actions）的使用案例與原理

大白話Vuex 核心概念&#xff08;state、mutations、actions&#xff09;的使用案例與原理 Vuex是Vue.js應用程序中專門用來管理狀態的工具&#xff0c;就好像是一個大管家&#xff0c;幫你把項目里一些重要的數據和操作管理得井井有條。下面用大白話結合案例來介紹Vuex核心概…
閱讀更多...
機器學習介紹與數據集

機器學習介紹與數據集

一、機器學習介紹與定義 1.1 機器學習定義 機器學習&#xff08;Machine Learning&#xff09;是讓計算機從數據中自動學習規律&#xff0c;并依據這些規律對未來數據進行預測的技術。它涵蓋聚類、分類、決策樹、貝葉斯、神經網絡、深度學習&#xff08;Deep Learning&#xf…
閱讀更多...
大模型訓練——pycharm連接實驗室服務器

大模型訓練——pycharm連接實驗室服務器

一、引言 我們在運行或者復現大佬論文代碼的時候&#xff0c;筆記本的算力不夠&#xff0c;需要使用實驗室的服務器進行運行。可以直接在服務器的終端上執行&#xff0c;但是這樣的話代碼調試就不方便。而我們可以使用 pycharm 連接到服務器&#xff0c;既方便了代碼調試&…
閱讀更多...
【Linux】進程優先級 | 進程調度(三)

【Linux】進程優先級 | 進程調度(三)

目錄 前言&#xff1a; 一、進程優先級&#xff1a; 1.通過nice值修改優先級&#xff1a; 二、進程切換&#xff1a; 三、上下文數據 四、Linux真實調度算法&#xff1a; 五、bitmap位圖&#xff1a; 六、命令總結&#xff1a; 總結&#xff1a; 前言&#xff1a; 我…
閱讀更多...
【redis】數據類型之hyperloglog

【redis】數據類型之hyperloglog

Redis的HyperLogLog&#xff08;HLL&#xff09;是一種高效的概率數據結構&#xff0c;也是一種基于字符串的數據結構&#xff0c;用于估計大數據集的唯一元素數量&#xff08;基數統計&#xff09;。它通過極低的內存占用&#xff08;約 12KB&#xff09;實現接近線性的時間復…
閱讀更多...
【C語言】第八期——指針、二維數組與字符串

【C語言】第八期——指針、二維數組與字符串

目錄 1 初始指針 2 獲取變量的地址 3 定義指針變量、取地址、取值 3.1 定義指針變量 3.2 取地址、取值 4 對指針變量進行讀寫操作 5 指針變量作為函數參數 6 數組與指針 6.1 指針元素指向數組 6.2 指針加減運算&#xff08;了解&#xff09; 6.2.1 指針加減具體數字…
閱讀更多...
SpringBoot——生成Excel文件

SpringBoot——生成Excel文件

在Springboot以及其他的一些項目中&#xff0c;或許我們可能需要將數據查詢出來進行生成Excel文件進行數據的展示&#xff0c;或者用于進行郵箱發送進行附件添加 依賴引入 此處demo使用maven依賴進行使用 <dependency><groupId>org.apache.poi</groupId>&…
閱讀更多...
mac 下 java 調用 gurobi 不能加載 jar

mac 下 java 調用 gurobi 不能加載 jar

在 mac 電腦中的 java 始終不能加載 gurobi 的 jar 包&#xff0c;java 的開發軟件 eclipse&#xff0c;idea 總是顯示找不到 gurobi 的 jar 包&#xff0c;但是 jar 包明明就在那里。 摸索了三個小時&#xff0c;最后發現原因竟然是&#xff1a; jar 包太新&#xff0c;替換…
閱讀更多...
服務端配置TCP探活，超出探活時間后的行為？

服務端配置TCP探活，超出探活時間后的行為？

server端啟動 &#xff08;完整源碼在最后&#xff09; 配置探活 setsockopt(client_fd, IPPROTO_TCP, TCP_KEEPIDLE, &(int){5}, sizeof(int)); // 空閑60秒后探測setsockopt(client_fd, IPPROTO_TCP, TCP_KEEPINTVL, &(int){10}, sizeof(int)); // 探測間隔10秒…
閱讀更多...
LLC諧振變換器恒壓恒流雙競爭閉環simulink仿真

LLC諧振變換器恒壓恒流雙競爭閉環simulink仿真

1.模型簡介 本仿真模型基于MATLAB/Simulink&#xff08;版本MATLAB 2017Ra&#xff09;軟件。建議采用matlab2017 Ra及以上版本打開。&#xff08;若需要其他版本可聯系代為轉換&#xff09;針對全橋LLC拓撲&#xff0c;利用Matlab軟件搭建模型&#xff0c;分別對輕載&#xf…
閱讀更多...
MySQL 中如何查看 SQL 的執行計劃？

MySQL 中如何查看 SQL 的執行計劃？

SQL 語句前面使用 EXPLAIN 關鍵字&#xff1a; EXPLAIN SELECT * FROM users WHERE id 1; 字段 含義 id 查詢的序號&#xff08;如果是子查詢或聯合查詢&#xff0c;會有多個 id&#xff09;。 select_type 查詢的類型&#xff08;簡單查詢、子查詢、聯合查詢等&#xff…
閱讀更多...
Discourse 中集成 Claude 3.7 Sonnet 模型

Discourse 中集成 Claude 3.7 Sonnet 模型

如果 Discourse 實例已經接入了 Anthropic。 那么只需要在后臺挑一個不希望繼續使用的模型改下就好。 否則需要重新在 Discourse 實例中配置 AI&#xff0c;然后獲得 Anthropic 的 key。 進入后臺的 AI 然后選擇 LLMs 雖然我們這里已經顯示成 3.7 了&#xff0c;但實際上所有…
閱讀更多...
Oracle 12c Docker安裝問題排查 sga_target 1536M is too small

Oracle 12c Docker安裝問題排查 sga_target 1536M is too small

一、問題描述 在虛擬機環境&#xff08;4核16GB內存&#xff09;上部署 truevoly/oracle-12c 容器鏡像時&#xff0c;一切運行正常。然而&#xff0c;當在一臺 128 核 CPU 和 512GB 內存的物理服務器上運行時&#xff0c;容器啟動時出現了 ORA-00821 等錯誤&#xff0c;提示 S…
閱讀更多...
DeepSeek 提示詞：高效的提示詞設計

DeepSeek 提示詞：高效的提示詞設計

&#x1f9d1; 博主簡介&#xff1a;CSDN博客專家&#xff0c;歷代文學網&#xff08;PC端可以訪問&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移動端可微信小程序搜索“歷代文學”&#xff09;總架構師&#xff0c;15年工作經驗&#xff0c;精通Java編…
閱讀更多...
最新文章

Copyright @ 2022~2023