1、什么是 Axios？
????????Axios? 是一個基于 ?Promise? 的 ?HTTP 客戶端，用于瀏覽器和 Node.js 環境，用來發送 ?HTTP 請求（如 GET、POST、PUT、DELETE 等）?。
? ? ? ??它常用于：
- 向后臺 API 發送請求獲取數據
- 提交表單數據
- 上傳文件
- 與 RESTful API 進行交互
????????在 ?Vue.js?項目中，Axios 是最流行、最推薦的 HTTP 請求庫之一，用來替代原生?fetch，因為它功能更強大、使用更方便、支持攔截器、取消請求等高級功能。
? ? ? ? 中文網地址：axios中文網|axios API 中文文檔 | axios
2、Axios特性
- 從瀏覽器中創建XMLHttpRequests
- 從 node.js 創建http請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求數據和響應數據
- 取消請求
- 自動轉換 JSON 數據
- 客戶端支持防御XSRF
3、Axios下載????????
????????1、使用 npm 安裝
npm install axios? ? ? ? 2、使用 yarn 安裝
yarn add axios? ? ? ? 3、直接通過 CDN 引入
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>? ? ? ? 4、下載Js文件
?????????????????Gitee下載地址：https://gitee.com/mirrors/axios
4、Axios 的基本用法
????????1.、發送 GET 請求
import axios from 'axios'// 方式1：直接使用 then/catch
axios.get('https://localhost:8081/list/1').then(response => {console.log('獲取的數據:', response.data)}).catch(error => {console.error('請求出錯:', error)})// 方式2：使用 async/await（推薦）
async function fetchData() {try {const response = await axios.get('https://localhost:8081/list/1')console.log('獲取的數據:', response.data)} catch (error) {console.error('請求失敗:', error)}
}fetchData()????????2、發送 POST 請求
axios.post('https://localhost:8081/list', {title: 'Hello Axios',body: 'This is a post sent by Axios',userId: 1
}).then(response => {console.log('創建成功:', response.data)}).catch(error => {console.error('創建失敗:', error)})? ? ? ? 3、執行多個并發請求
function getUserAccount() {return axios.get('/user/12345');
}function getUserPermissions() {return axios.get('/user/12345/permissions');
}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 兩個請求現在都執行完成}));? ? ? ? 4、帶參數的 GET 請求（Query 參數）
axios.get('https://localhost:8081/posts', {params: {userId: 1}
}).then(response => {console.log(response.data) // 獲取 userId 為 1 的所有文章})//實際請求的 URL 類似：
//https://localhost:8081/posts?userId=15、Axios 常用配置項
????????在發送請求時，可以傳入一個 ?配置對象，常用選項包括：
axios({method: 'post', // 請求方法：get, post, put, delete 等url: '/user/12345', // 請求地址data: { // 請求體（通常用于 POST、PUT）firstName: 'John',lastName: 'Doe'},params: { // URL 查詢參數（GET 參數）ID: 12345},headers: { // 自定義請求頭'X-Custom-Header': 'foobar'},timeout: 5000 // 請求超時時間（毫秒）
})6、Axios 實例
????????通常我們不會直接使用全局的?axios，而是創建一個 ?Axios 實例，這樣可以：
- 設置 ?基礎 URL?
- 設置 ?默認請求頭（如 Token）??
- 統一的 ?超時時間?
- 更好的 ?模塊化管理
????????創建實例
import axios from 'axios'// 創建一個 axios 實例
const api = axios.create({baseURL: 'https://localhost:8081', // 基礎路徑timeout: 5000, // 請求超時時間headers: { 'Content-Type': 'application/json' }
})????????使用實例發送請求
// GET
api.get('/posts/1').then(response => {console.log(response.data)})// POST
api.post('/posts', {title: 'Hello',body: 'World',userId: 1
})7、請求 & 響應攔截器
????????在請求發出去之前或收到響應之后，統一做一些處理，比如：
- 添加 token 到請求頭
- 統一處理錯誤
- 加載狀態控制
????????1、請求攔截器（Request Interceptor）
api.interceptors.request.use(config => {// 在發送請求之前做些什么const token = localStorage.getItem('token')if (token) {config.headers.Authorization = `Bearer ${token}`}console.log('請求配置:', config)return config // 必須返回 config},error => {// 請求錯誤時做些什么return Promise.reject(error)}
)????????2、響應攔截器（Response Interceptor）
api.interceptors.response.use(response => {// 對響應數據做點什么，比如只返回 data 部分return response.data // 直接返回數據部分，簡化后續處理},error => {// 對響應錯誤做點什么if (error.response) {switch (error.response.status) {case 401:console.error('未授權，請登錄')breakcase 404:console.error('請求資源不存在')breakcase 500:console.error('服務器錯誤')breakdefault:console.error('請求錯誤:', error.response.status)}} else {console.error('網絡或未知錯誤:', error.message)}return Promise.reject(error)}
)8、在 Vue 項目中使用 Axios
????????在實際的 Vue 項目中，通常會：
?????????????????1、封裝 axios?（創建實例 + 攔截器）
? ? ? ? ? ? ? ? 2、在 main.js 或插件中全局掛載（可選）??
? ? ? ? ? ? ? ? 3、在組件或 API 模塊中調用
????????項目結構：
src/
├── api/
│ └── user.js # 用戶相關的接口
├── utils/
│ └── request.js # axios 實例和基礎配置
└── components/└── ...????????1、創建 axios 實例（utils/request.js）
// utils/request.js
import axios from 'axios'const request = axios.create({baseURL: 'https://localhost:8081', // 你的 API 地址timeout: 5000
})// 請求攔截器
request.interceptors.request.use(config => {const token = localStorage.getItem('token')if (token) {config.headers.Authorization = `Bearer ${token}`}return config},error => Promise.reject(error)
)// 響應攔截器
request.interceptors.response.use(response => response.data, // 直接返回數據部分error => {console.error('請求出錯:', error)return Promise.reject(error)}
)export default request????????2、封裝 API 請求（api/user.js）
// api/user.js
import request from '@/utils/request'// 獲取用戶信息
export function getUser(id) {return request.get(`/users/${id}`)
}// 創建用戶
export function createUser(data) {return request.post('/users', data)
}????????3、在 Vue 組件中使用
<template><div><button @click="fetchUser">獲取用戶</button><p v-if="user">用戶名: {{ user.name }}</p></div>
</template><script>
import { getUser } from '@/api/user'export default {data() {return {user: null}},methods: {async fetchUser() {try {const res = await getUser(1) // 獲取 ID 為 1 的用戶this.user = res} catch (error) {console.error('獲取用戶失敗:', error)}}}
}
</script>9、Vue 3 Composition API 中使用 Axios
????????如果使用 Vue 3 的?<script setup>，代碼會更簡潔：
<script setup>
import { ref } from 'vue'
import { getUser } from '@/api/user'const user = ref(null)const fetchUser = async () => {try {const res = await getUser(1)user.value = res} catch (error) {console.error('獲取失敗', error)}
}
</script><template><button @click="fetchUser">獲取用戶</button><p v-if="user">用戶名: {{ user.name }}</p>
</template>
