---

axios 簡介

axios 是基于 Promise 的HTTP客戶端，用于瀏覽器和 Node.js，是現代前端開發中最流行的請求庫之一。

核心特性

1. 瀏覽器與 Node.js 通用
   • 瀏覽器端基于 XMLHttpRequest，Node.js 端基于 http 模塊。
2. Promise API
   • 支持 async/await 語法，避免回調地獄：

     const response = await axios.get('/api/data');
     

3. 攔截器
   • 可全局攔截請求和響應（如添加認證頭、統一錯誤處理）：

     axios.interceptors.request.use(config => {config.headers.Authorization = 'Bearer token';return config;
     });
     

4. 請求取消
   • 使用 AbortController 取消未完成的請求：

     const controller = new AbortController();
     axios.get('/api/data', { signal: controller.signal });
     controller.abort(); // 取消請求
     

5. 自動轉換 JSON
   • 響應數據自動解析為 JSON，請求數據自動序列化為 JSON。
6. 攔截錯誤處理
   • 統一處理 HTTP 錯誤狀態碼（如 401、500）：

     axios.interceptors.response.use(response => response,error => {if (error.response.status === 401) {// 處理認證失敗}}
     );
     

典型應用場景

• 前后端數據交互（如獲取用戶信息、提交表單）。
• 與 REST API 通信。
• 實時數據更新（如輪詢服務器狀態）。

一，Vue工程中安裝axios

1，單擊【Terminal】按鈕，打開命令行窗口——輸入：【npm Install axios】——單擊【Enter】鍵安裝axios。

2，在項目工程目錄中查看安裝好的axios。

二，編寫app.vue

<template><div id="app"> <!-- 添加根元素 --><h1>vue工程</h1><router-view/></div>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

三，編寫HomeView.vue

<template><button @click="sendAjax">發送請求</button>
</template><script setup>import axios from "axios";
/*定義函數向后臺發送ajax請求*/
function sendAjax(){axios.get("http://localhost:8081/hello?name=zhangsan").then((response)=>{ //回調函數在前端處理后臺服務器響應的結果console.log(response);console.log(response.data); //獲得服務器響應數據}).catch((error)=>{ //如果發生異常，執行該函數，捕獲異常console.log(error);});
}
</script>

四，Idea打開后臺項目

1，選擇【File】——【Open】。

2，選擇創建好的后臺項目，單擊【OK】按鈕，打開項目。

3，單擊【New Windows】，以新窗口的形式打開這個項目，避免關閉先前打開的Vue項目。

4，如下圖，項目成功打開。

五，創建HelloController

1，右擊【Controller】包——選擇【New】——單擊【Java Class】。

2，輸入類名【HelloController】——單擊【Enter】鍵，創建類。

3，編輯HelloController的代碼。

package net.army.controller;import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;/*** 功能：測試接收客戶端請求* 日期：2025年07月03日* 作者：梁辰興*/
@RestController
public class HelloController {// 處理客戶端請求@RequestMapping("/sayHello")@CrossOrigin //解決跨域問題public String hello(String name){// 將name輸出到控制臺System.out.println("Hello："+name);// 將name返回給客戶端return "Hello："+name;}
}

六，配置web訪問端口

將端口號更改為8081

# 應用服務 WEB 訪問端口
server.port=8081

七，運行項目，查看效果

（一）運行后端SpringBoot項目

1，單擊綠色運行按鈕，選擇運行方式。

2，單擊【Run ‘SpringBootMyBatisDay…’】，運行項目。

3，成功運行界面效果圖。

（二）運行前端Vue3項目

1，單擊【serve】按鈕，運行項目。

2，成功運行效果圖。

（三）查看效果

1. 瀏覽器查看

1，單擊地址：http://localhost:8080/，進入前端頁面；或者復制該地址，粘貼到瀏覽器的地址欄，按回車鍵，打開頁面。

2，在瀏覽器界面，按下F12鍵，啟動開發者模式，單擊【控制臺】打開控制臺界面。

3，單擊界面中的【發送請求】按鈕——查看控制臺輸出的信息。

2. 后端控制臺查看

1，打開后端的項目的Idea窗口，單擊【Run】按鈕，打開運行窗口。

2，查看接收到前端發過來的請求內容，zhangsan。