使用axios及和spirng boot 交互

Axios

Axios是一個基于Promise的HTTP庫，可以發送get、post等請求，它作用于瀏覽器和Node.js中。當運行在瀏覽器時，使用XMLHttpRequest接口發送請求；當運行在Node.js時，使用HTTP對象發送請求。

使用步驟：

? 第一步：安裝axios? 略

第二步：在項目中使用Axios時，通常的做法是先將Axios封裝成一個模塊，然后在組件中導入模塊。

第三步：編寫各種請求?這里只說明基本的get請求和post請求。

request({url: '請求路徑',method: 'get',params: { 參數 }
}).then(res => {console.log(res)
}).catch(error => {console.log(error)
})

get請求：

/*** 發送GET請求*/
export const getReq = (url, params) => {return axios({method: 'get',params, // 使用params而非dataurl: `${base}${url}`,headers: {'token': localStorage.getItem("token"),}});
}

?使用它：

// 獲取用戶列表，帶分頁參數
getReq('/api/users', { page: 1, pageSize: 10 }).then(res => {console.log('用戶列表:', res.data);}).catch(err => {console.error('請求失敗:', err);});

?post請求：

request({url: '請求路徑',method: 'post',data: { 參數 }
}).then(res => {console.log(res)
}).catch(error => {console.log(error)
})

export const postReq = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params,headers: {'token': localStorage.getItem("token"),}});

?異步請求調用中?async+await 的應用

代碼：

export const fetchData = async (url, params) => {try {const response = await axios({method: 'get',params, // 修正：使用 params 而非 dataurl: `${base}${url}`,headers: {'token': localStorage.getItem('token'),}});return response.data;} catch (error) {console.error('請求失敗:', error);throw error; // 修正：重新拋出錯誤，讓調用者處理}
};

?async+await 的概念

async/await 是一種建立在Promise之上的編寫異步或非阻塞代碼的新方法。async 是異步的意思，而 await 是 async wait的簡寫，即異步等待。

所以從語義上就很好理解 async 用于聲明一個函數是異步的，而await 用于等待一個異步方法執行完成。

那么想要同步使用數據的話，就可以使用 async+await 。

?說明：async函數返回的是一個 Promise 對象。async 函數（包含函數語句、函數表達式、Lambda表達式）會返回一個 Promise 對象，如果在函數中 ?一個直接量，async 會把這個直接量通過promise.solve() 封裝成 Promise 對象。

如果 async 函數沒有返回值，它會返回 promise.solve(underfined)。

await 等待的是一個表達式，這個表達式的計算結果是 Promise 對象或者其它值（換句話說，await 可以等任意表達式的結果）。

如果它等到的不是一個 Promise 對象，那 await 表達式的運算結果就是它等到的東西。

如果它等到的是一個 Promise 對象，await 就忙起來了，它會阻塞后面的代碼，等著 Promise 對象 resolve，然后得到 resolve 的值，作為 await 表達式的運算結果。

調用方式：

Promise 鏈式調用：.then().catch() 同步風格的

await：在 async 函數內部使用

romise 鏈式調用適合 “非阻塞、并行、兼容舊環境” 的場景，強調異步操作的獨立性。
async/await適合 “順序依賴、復雜流程、高可讀性” 的場景，讓異步代碼更接近同步思維模式。

1. 使用?`.then()`?和?`.catch()`?鏈式調用

import { fetchData } from './api'; // 假設從 api.js 導入// 調用 fetchData 獲取用戶列表
fetchData('/api/users', { page: 1, pageSize: 10 }).then(data => {console.log('用戶列表:', data);// 處理返回的數據（如更新組件狀態）}).catch(error => {console.error('請求失敗:', error);// 顯示錯誤消息（如彈框提示）});
//其他邏輯會和fetchData同步進行
.....

2. 在?`async`?函數內部使用?`await`

async function loadUsers() {try {// 等待請求完成并獲取數據const data = await fetchData('/api/users', { page: 1, pageSize: 10 });console.log('用戶列表:', data);// 可以直接使用同步風格的代碼處理數據const firstUser = data.list[0];console.log('第一個用戶:', firstUser);} catch (error) {console.error('請求失敗:', error);// 錯誤處理邏輯}
}// 調用 async 函數
loadUsers();

當執行?loadUsers()?函數時，它會返回一個?Promise 對象，并且其內部邏輯會以異步方式執行。以下是詳細解釋：

1. 函數返回值：Promise 對象

原因：任何使用?async?關鍵字聲明的函數都會自動返回一個 Promise。

示例驗證：

javascript

const result = loadUsers();
console.log(result instanceof Promise); // 輸出: true

Promise 的狀態：
- 成功（fulfilled）：當?fetchData?請求成功且沒有拋出異常時，Promise 會 resolve，并傳遞?loadUsers?函數的返回值（若沒有顯式返回，默認返回?undefined）。
- 失敗（rejected）：當?fetchData?拋出異常，或?loadUsers?內部?try?塊中的代碼報錯時，Promise 會 reject，并傳遞錯誤對象。

2. 函數執行流程（異步本質）

javascript

console.log('開始執行');
loadUsers();
console.log('結束執行');// 輸出順序：
// 開始執行
// 結束執行
// （等待 fetchData 請求完成后）
// 用戶列表: ...
// 第一個用戶: ...

關鍵特點：
1. loadUsers()?函數被調用后立即返回 Promise，不會阻塞后續代碼執行。
2. await fetchData(...)?僅暫停函數內部的執行，不會影響外部代碼（如?console.log('結束執行')?會先于?fetchData?的結果輸出）。
3. 當?fetchData?的 Promise 解決（成功 / 失敗）時，loadUsers?內部的?await?會恢復執行，并決定 Promise 的最終狀態。

3. Promise 的解決（resolve）情況

當?fetchData?請求成功且?try?塊內代碼無異常時：

loadUsers?的 Promise 會 resolve，返回值為?undefined（因為函數沒有顯式?return）。

等價于：

javascript

async function loadUsers() {// ... 代碼 ...return undefined; // 隱式返回
}

可通過?.then()?捕獲結果：

javascript

loadUsers().then(result => {console.log('loadUsers 返回值:', result); // 輸出: undefined
});

4. Promise 的拒絕（reject）情況

當出現以下情況時，loadUsers?的 Promise 會 reject：

fetchData?拋出錯誤：

javascript

fetchData('/api/users', { page: 1 }).catch(error => {throw new Error('請求失敗: ' + error); // 被 loadUsers 的 catch 捕獲});

try?塊內其他代碼報錯：

javascript

const firstUser = data.list[0]; // 若 data.list 為 undefined，會拋出 TypeError

catch?塊中重新拋出錯誤：

javascript

catch (error) {console.error('請求失敗:', error);throw error; // 重新拋出，導致 Promise reject
}

可通過?.catch()?捕獲錯誤：

javascript

loadUsers().catch(error => {console.error('loadUsers 錯誤:', error);
});

5. 與 Promise 鏈式調用的等價關系

loadUsers?函數的異步邏輯等價于以下 Promise 寫法：

javascript

function loadUsers() {return fetchData('/api/users', { page: 1, pageSize: 10 }).then(data => {console.log('用戶列表:', data);const firstUser = data.list[0];console.log('第一個用戶:', firstUser);// 隱式返回 undefined}).catch(error => {console.error('請求失敗:', error);throw error; // 重新拋出錯誤，保持 Promise 鏈的異常傳遞});
}

6. 如何獲取函數的執行結果？

（1）使用?`.then()`

javascript

loadUsers().then(() => {console.log('數據處理完成');}).catch(error => {console.error('處理失敗:', error);});

（2）在另一個?`async`?函數中使用?`await`

javascript

async function processData() {try {await loadUsers(); // 等待 loadUsers 的 Promise 解決console.log('loadUsers 執行完畢');} catch (error) {console.error('processData 捕獲到錯誤:', error);}
}

返回值：loadUsers()?始終返回一個 Promise 對象。
狀態由內部邏輯決定：
- 成功時（fetchData?正常返回且無代碼錯誤）：Promise resolve，返回?undefined。
- 失敗時（fetchData?報錯或代碼異常）：Promise reject，傳遞錯誤對象。
異步本質：函數內部使用?await?暫僅停自身執行，不阻塞主線程，整體仍為異步操作。

應用transformRequest

export const postRequest = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params,transformRequest: [function (data) {let ret = '';for (let key in data) {ret += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&';}return ret;}],headers: {'Content-Type': 'application/x-www-form-urlencoded', // 修正為表單格式}});
}

說明：

數據格式與請求頭的關系：
- application/json：請求體應為 JSON 格式（如{"key": "value"}）。
- application/x-www-form-urlencoded：請求體應為表單格式（如key=value&key2=value2）。
transformRequest的影響：
- 當前代碼將對象轉換為表單格式數據，但請求頭卻聲明為 JSON，導致后端可能無法解析。
- 若后端期望 JSON 數據，應移除transformRequest并保持application/json頭。

正確的搭配方式：

數據格式	Content-Type	是否需要 transformRequest
JSON	application/json	不需要
表單數據	application/x-www-form-urlencoded	需要（如當前函數）
二進制文件 / 表單	multipart/form-data	不需要

函數調用示例

場景 1：提交表單數據到后端

import { postRequest } from './api.js'; // 導入函數// 表單數據
const formData = {username: 'test_user',password: '123456',email: 'test@example.com'
};// 調用函數
postRequest('/api/register', formData).then(response => {console.log('注冊成功:', response.data);}).catch(error => {console.error('注冊失敗:', error);});

場景 2：發送 JSON 數據（需修改函數）

如果需要發送 JSON 數據，應使用以下封裝：

export const postJsonRequest = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params,headers: {'Content-Type': 'application/json',}});
}// 調用示例
const userData = {name: '張三',age: 25,hobbies: ['閱讀', '編程']
};postJsonRequest('/api/users', userData).then(res => console.log(res.data));

調用注意事項

參數說明：
- url：API 路徑（如/api/login），會自動拼接base（如http://localhost:8080）。
- params：需要發送的數據對象，會被transformRequest轉換為表單格式。

錯誤處理：

在調用時添加.catch()處理請求失敗：

postRequest(...).catch(error => {const status = error.response?.status || '網絡錯誤';const message = error.response?.data?.message || '請求失敗';console.error(`狀態碼 ${status}: ${message}`);
});

與其他請求函數的區別：
- 若后端接口需要不同的 Content-Type，應創建不同的封裝函數（如 JSON 格式、文件上傳等）。

數據為對象格式（如{key: value}）
后端接口期望表單數據（application/x-www-form-urlencoded）
添加錯誤處理邏輯以應對請求失敗的情況

如果需要發送 JSON 數據，最好創建專門的函數，不需要transformRequest。

對不同格式的數據，spring boot 端的處理：

場景	推薦注解	示例
處理 JSON 數據	`@RequestBody`	`@RequestBody User user`
處理簡單表單數據（少量參數）	`@RequestParam`	`@RequestParam("username") String name`
處理復雜表單數據（對象綁定）	`@ModelAttribute`	`@ModelAttribute User user`
同時支持 JSON 和表單（需自定義）	`@RequestBody`?+ 轉換器	配置?`FormHttpMessageConverter`

建議：

JSON：統一使用?@RequestBody，前端發送?application/json。
表單：使用?@RequestParam?或?@ModelAttribute，前端發送?application/x-www-form-urlencoded。
避免混用：不要試圖用?@RequestBody?同時處理兩種格式，會增加復雜度。

postJsonRequest?

export const postJsonRequest = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params,  // axios 自動將對象序列化為 JSONheaders: {'Content-Type': 'application/json',}});
}

?調用方式例子：

// 發送用戶數據
const userData = {username: 'john',email: 'john@example.com',isActive: true
};postJsonRequest('/api/users', userData).then(res => console.log('用戶創建成功:', res.data)).catch(err => console.error('錯誤:', err));

發送表單數據（application/x-www-form-urlencoded）

export const postFormRequest = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params,transformRequest: [function (data) {let ret = '';for (let key in data) {ret += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&';}return ret;}],headers: {'Content-Type': 'application/x-www-form-urlencoded',}});
}

??調用方式例子：

// 提交登錄表單
const loginData = {username: 'admin',password: '123456',rememberMe: true
};postFormRequest('/api/login', loginData).then(res => {localStorage.setItem('token', res.data.token);console.log('登錄成功');}).catch(err => alert('登錄失敗: ' + err.message));

比與適用場景及編碼問題

方案	Content-Type	數據格式	后端適配	前端寫法
方案一（JSON）	`application/json`	`{"key":"value"}`	Spring Boot 的?`@RequestBody`	直接傳遞對象
方案二（表單）	`application/x-www-form-urlencoded`	`key=value&key2=value2`	Spring Boot 的?`@RequestParam`/`@ModelAttribute`	需手動或用庫序列化

后端接口匹配：
- JSON 格式：確保后端使用?@RequestBody?注解
- 表單格式：確保后端使用?@RequestParam?或?@ModelAttribute
編碼問題：
- 表單數據中的特殊字符（如中文）會被?encodeURIComponent?自動編碼
- JSON 數據中的中文會被序列化為 Unicode 字符（如?\u4e2d）

putRequest ：

export const putRequest = (url, params) => {return axios({method: 'put',url: `${base}${url}`,data: params,transformRequest: [function (data) {if (!data) return '';const ret = [];for (let key in data) {if (data.hasOwnProperty(key)) {const value = data[key];// 處理值為 null 或 undefined 的情況const encodedValue = value === null || value === undefined ? '' : encodeURIComponent(value);ret.push(`${encodeURIComponent(key)}=${encodedValue}`);}}// 使用 join 避免末尾多余的 &return ret.join('&');}],headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).catch(error => {console.error('PUT 請求失敗:', error);// 可以在這里進行統一的錯誤處理throw error; // 繼續拋出錯誤，讓調用者可以捕獲});
};

參考vue+element UI 學習總結筆記(一)_vue+elementui一點-CSDN博客