快捷導(dǎo)航

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

更新時(shí)間：2024年09月11日 10:38:48 作者：Orion?Guan's?山月潤(rùn)無(wú)聲

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

一、Promise概述

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

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

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

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

Promise特點(diǎn)：

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

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

二、Promise基本用法

Promise對(duì)象回調(diào)函數(shù)兩個(gè)形參(形參名任意)

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

說(shuō)明： Promise.then()方法的返回對(duì)象調(diào)用其catch(回調(diào)函數(shù))方法時(shí)，當(dāng)Promise對(duì)象由進(jìn)行狀態(tài)轉(zhuǎn)化為已失敗狀態(tài)（調(diào)用reject()）

或Promise對(duì)象回調(diào)函數(shù)體異常報(bào)錯(cuò)，則會(huì)自動(dòng)觸發(fā)catch方法中回調(diào)函數(shù)的執(zhí)行。

三、async和await關(guān)鍵字

async：

使用async關(guān)鍵字標(biāo)注的方法可以將一個(gè)普通函數(shù)轉(zhuǎn)化為一個(gè)異步函數(shù)即Promise對(duì)象的回調(diào)函數(shù)，從而幫助我們使用簡(jiǎn)潔的語(yǔ)法快速獲得一個(gè)promise對(duì)象。

1、async關(guān)鍵字標(biāo)注的函數(shù)返回值就是一個(gè)promise對(duì)象

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

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

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

狀態(tài)所決定。

await：

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

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

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

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

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

四、Axios介紹

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

4.1 Axios基本用法

步驟：

使用npm install axios安裝Axios框架。
從axios框架中默認(rèn)導(dǎo)入axios對(duì)象。
調(diào)用axios方法，向后端發(fā)送請(qǐng)求。
使用axios返回的promise對(duì)象并調(diào)用then()方法，來(lái)接收axios方法成功發(fā)送請(qǐng)求后，服務(wù)端返回的response響應(yīng)對(duì)象。

4.2 Axios簡(jiǎn)化用法之get和post方法

axios.get()請(qǐng)求方法：

axios.post()請(qǐng)求方法:

五、Axios攔截器

如果axios向后端發(fā)送的是一個(gè)正常的請(qǐng)求，則請(qǐng)求在到達(dá)后端服務(wù)器之前會(huì)先經(jīng)過(guò)請(qǐng)求攔截器的方法1進(jìn)行處理，處理過(guò)后再將請(qǐng)求報(bào)文返回放行給后端服務(wù)器。若axios發(fā)送的是一個(gè)錯(cuò)誤、異常的請(qǐng)求，請(qǐng)求攔截器方法2執(zhí)行處理后，會(huì)直接響應(yīng)給axios請(qǐng)求方法一個(gè)失敗的Promise對(duì)象。

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

六、跨域問(wèn)題處理

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

解決方案：

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

總結(jié)

到此這篇關(guān)于Java Web Axios實(shí)現(xiàn)前后端數(shù)據(jù)異步交互的文章就介紹到這了,更多相關(guān)Axios前后端數(shù)據(jù)異步交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: