Java?Web?Axios實現(xiàn)前后端數(shù)據(jù)異步交互實例代碼

更新時間：2024年09月11日 10:38:48 作者：Orion?Guan's?山月潤無聲

Axios作為一個流行的前端?HTTP?通信庫,可以極大地簡化前端與后端之間的數(shù)據(jù)交互,這篇文章主要介紹了Java?Web?Axios實現(xiàn)前后端數(shù)據(jù)異步交互的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、Promise概述

axios是代替原生的ajax實現(xiàn)前后端數(shù)據(jù)交互的一套新解決方案，而axios使用的是promise相關的語法，而Promise主要是解決函數(shù)回調的問題。

普通函數(shù)：普通函數(shù)被調用時只有函數(shù)執(zhí)行完畢后才會執(zhí)行后續(xù)的代碼。

回調函數(shù)：就是在一個函數(shù)體里面去調用另一個函數(shù)?；卣{函數(shù)的執(zhí)行通常依托于事件的驅動，當事件發(fā)生后才會自動執(zhí)行的函數(shù)?；卣{函數(shù)之外的代碼不會等到回調函數(shù)執(zhí)行完畢之后才會執(zhí)行。

所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise是個對象，從它可以獲取異步操作的消息。Promise提供統(tǒng)一的API，各種異步操作都可以用同樣的方法進行處理。

Promise特點：

（1）Promise對象代表一個異步操作，有三種狀態(tài)：Pending（進行中）、Resolved（已完成，又稱Fulfilled）和Rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。

（2）一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結果。

二、Promise基本用法

Promise對象回調函數(shù)兩個形參(形參名任意)

resolve形參1：當在Promise對象的回調函數(shù)體中調用resolve()方法時，則表示Promise對象由Pending進行中狀態(tài)轉化為了Resolved已完成狀態(tài)。此時瀏覽器就會自動調用Promise.then()方法中的首個形參回調函數(shù)。
reject形參2：當Promise對象的回調函數(shù)體中調用第二個形參reject()方法時，則表示Promise對象由Pending進行狀態(tài)轉換為了Rejectd已失敗狀態(tài)。此時瀏覽器會自動調用Promise.then()方法中的第二個形參回調函數(shù)。

說明： Promise.then()方法的返回對象調用其catch(回調函數(shù))方法時，當Promise對象由進行狀態(tài)轉化為已失敗狀態(tài)（調用reject()）

或Promise對象回調函數(shù)體異常報錯，則會自動觸發(fā)catch方法中回調函數(shù)的執(zhí)行。

三、async和await關鍵字

async：

使用async關鍵字標注的方法可以將一個普通函數(shù)轉化為一個異步函數(shù)即Promise對象的回調函數(shù)，從而幫助我們使用簡潔的語法快速獲得一個promise對象。

1、async關鍵字標注的函數(shù)返回值就是一個promise對象

2、async異步函數(shù)若能正常返回結果，則Promise對象就是一個成功狀態(tài)，返回值就是成功狀態(tài)的返回值。

3、async異步函數(shù)中出現(xiàn)了異常，此時返回的promise對象就是一個失敗狀態(tài)。

4、async異步函數(shù)返回的如果是一個Promise對象,則Promise對象的狀態(tài)由async關鍵字標注的內部promise

狀態(tài)所決定。

await：

使用await關鍵字可以幫助我們快捷的獲取Promise成功狀態(tài)的返回值。

1、await關鍵字修飾的若是一普通值則直接返回普通值、若修飾的是一個Promise對象則返回其成功狀態(tài)的返回值。

2、await關鍵字修飾的若是一個失敗狀態(tài)的Promise則會直接拋異常。

3、await關鍵字只能出現(xiàn)在由async修飾的異步函數(shù)中使用，但異步函數(shù)中可以沒有await關鍵字。

4、只有await關鍵字修飾的代碼執(zhí)行完畢后，其所在的方法中后面的代碼才會執(zhí)行；異步函數(shù)之外的其它代碼則不會等待await修飾的代碼執(zhí)行完后再執(zhí)行。

四、Axios介紹

傳統(tǒng)方式前端向后端發(fā)送異步請求需要使用原生的Ajax代碼實現(xiàn)。此種方式代碼比較繁瑣而Axios就是將原生的Ajax的功能封裝API方法，前端向后端發(fā)送數(shù)據(jù)時只需要調用Axios對象相關的API即可，極大的簡化了代碼，使用方便。

4.1 Axios基本用法

步驟：

使用npm install axios安裝Axios框架。
從axios框架中默認導入axios對象。
調用axios方法，向后端發(fā)送請求。
使用axios返回的promise對象并調用then()方法，來接收axios方法成功發(fā)送請求后，服務端返回的response響應對象。

4.2 Axios簡化用法之get和post方法

axios.get()請求方法：

axios.post()請求方法:

五、Axios攔截器

如果axios向后端發(fā)送的是一個正常的請求，則請求在到達后端服務器之前會先經(jīng)過請求攔截器的方法1進行處理，處理過后再將請求報文返回放行給后端服務器。若axios發(fā)送的是一個錯誤、異常的請求，請求攔截器方法2執(zhí)行處理后，會直接響應給axios請求方法一個失敗的Promise對象。

后端服務器在處理正常的請求后，響應報文在返回給axios發(fā)送請求的調用函數(shù)之前會先經(jīng)過響應攔截器，如果后端響應的是正常的報文則由響應攔截器的方法1處理響應報文后，將其返回給axios請求方法；若是異常的響應報文則由響應攔截器的方法2處理后，返回給axios請求方法。

六、跨域問題處理

在前后端分離開發(fā)環(huán)境中，前端視圖會單獨部署到一臺服務器上而后端工程也會單獨部署到另臺服務器中。當前端視圖需要通過axios異步請求向另臺服務器的后端請求數(shù)據(jù)時，此時用戶瀏覽器就會面臨著跨域的問題。所謂跨域就是用戶瀏覽器訪問的頁面來自于前端服務器，而頁面異步請求目標地址則是另一臺的后端服務器的url與用戶瀏覽器當前地址欄訪問的目標服務器不是同一個服務。此時當用戶向另臺后端服務器發(fā)送異步請求數(shù)據(jù)時，由于涉及到跨域的問題，瀏覽器就會認為此次用戶異步請求響應回來的數(shù)據(jù)是不安全的、導致axios異步請求失敗。

解決方案：

瀏覽器在正式向后端服務器發(fā)送異步請求數(shù)據(jù)之前，其實會先向后端服務器發(fā)送一個option方式的預檢請求、詢問跨域異步請求的數(shù)據(jù)是否安全。此時，我們就可以在后端服務工程上創(chuàng)建個跨域處理的過濾器，對用戶發(fā)送過來的請求進行過濾。若用戶發(fā)送的是一個預檢請求（請求方式是option），則直接響應給用戶瀏覽器一個200狀態(tài)碼的響應報文，并設置允許瀏覽器跨域的相關響應頭。這樣瀏覽器在向后端服務器發(fā)送axios異步請求之前、由于之前的預檢請求后端服務器告訴其瀏覽器可以進行跨域訪問且異步請求的數(shù)據(jù)是安全的。這樣用戶瀏覽器就可以跨域向后端服務器發(fā)送請求獲取到響應信息并渲染到標簽頁。