Vue.js3前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用 課件 單元七 與后端交互-axios

Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元七與后端交互——axios目錄認(rèn)識(shí)axiosaxios處理HTTP請(qǐng)求axios攔截器項(xiàng)目6

查詢旅游城市天氣認(rèn)識(shí)axios

axios是一個(gè)強(qiáng)大的HTTP庫，可以用在瀏覽器或Node.js中，它提供了豐富的API，支持PromiseAPI、異步請(qǐng)求處理、JSON數(shù)據(jù)自動(dòng)轉(zhuǎn)換等作用：在Vue中，用于實(shí)現(xiàn)對(duì)異步請(qǐng)求的處理認(rèn)識(shí)axios

axios相關(guān)概念異步編程ES6標(biāo)準(zhǔn)采用Promise代替?zhèn)鹘y(tǒng)的“回調(diào)函數(shù)+事件”異步編程方案，以解決“回調(diào)地獄”問題ES7在ES6基礎(chǔ)上加以改進(jìn)，提出了async/await異步編程方案，使得代碼更為簡(jiǎn)潔易讀認(rèn)識(shí)axios

PromisePromise，可以理解為一個(gè)容器，里面包裹著某個(gè)事件（異步任務(wù)），這個(gè)事件會(huì)在將來的某個(gè)時(shí)刻發(fā)生，同時(shí)它還會(huì)保存事件的結(jié)果創(chuàng)建Promise對(duì)象的語法認(rèn)識(shí)axiosPromise相關(guān)概念Promise對(duì)象的狀態(tài)：Pending（等待中）、Resolved（已完成）和Rejected（已失?。㏄romise對(duì)象的參數(shù)：resolve和rejectPromise對(duì)象的方法：then和catch認(rèn)識(shí)axiosPromise實(shí)現(xiàn)異步編程的原理認(rèn)識(shí)axios示例：Promise對(duì)象的應(yīng)用示例運(yùn)行結(jié)果認(rèn)識(shí)axios

示例：Promise實(shí)現(xiàn)多異步任務(wù)的順序執(zhí)行在停留2s、4s、6s后，控制臺(tái)分別輸出了“第一層嵌套”、“第二層嵌套”、“第三層嵌套”。示例運(yùn)行結(jié)果認(rèn)識(shí)axios

async/await作用：用于在Promise基礎(chǔ)上用同步的寫法來編寫異步任務(wù)代碼async是一個(gè)修飾符，用于表示某個(gè)函數(shù)是異步的，并返回一個(gè)Promise對(duì)象語法：例如：認(rèn)識(shí)axios

async/awaitawait是一個(gè)修飾符，用于表示等待某個(gè)表達(dá)式執(zhí)行完成，只有該表達(dá)式執(zhí)行完成，才能執(zhí)行后面的語句，它只能在async函數(shù)中使用語法：例如：認(rèn)識(shí)axios

async/awaitasync和await配合使用，以實(shí)現(xiàn)多異步任務(wù)的順序執(zhí)行axios安裝與配置

axios特點(diǎn)從瀏覽器中創(chuàng)建XMLHttpRequest對(duì)象從Node.js創(chuàng)建HTTP請(qǐng)求支持PromiseAPI攔截請(qǐng)求和響應(yīng)轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)取消請(qǐng)求自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)客戶端支持防御XSRF（Cross-SiteRequestForgery，跨站請(qǐng)求偽造）axios安裝與配置axios的安裝CDN安裝方式axiosAPI

axios語法：參數(shù)config參數(shù)responseaxios處理HTTP請(qǐng)求處理任何類型請(qǐng)求示例（主要代碼）axios處理HTTP請(qǐng)求處理GET/POST請(qǐng)求示例（主要代碼）axios攔截器axios攔截器是一種鉤子函數(shù)，它會(huì)在特定的操作之前或之后被觸發(fā)作用：要用于網(wǎng)絡(luò)中存在請(qǐng)求時(shí)，對(duì)發(fā)起請(qǐng)求或請(qǐng)求響應(yīng)的操作做一些相應(yīng)的處理分類：請(qǐng)求方向的攔截器，稱為請(qǐng)求攔截器響應(yīng)方向的攔截器，稱為響應(yīng)攔截器axios攔截器語法請(qǐng)求攔截器響應(yīng)攔截器axios攔截器示例：利用axiosAPI實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求攔截器，同時(shí)對(duì)所有請(qǐng)求的IP和端口號(hào)、數(shù)據(jù)格式，以及超時(shí)期限進(jìn)行統(tǒng)一設(shè)置axios攔截器需求描述歷史名城游網(wǎng)站的信息欄目中，要求根據(jù)用戶所選擇區(qū)域里的城市名稱，能查詢到該市當(dāng)天的天氣情況，包括溫度、風(fēng)向、空氣質(zhì)量等，為用戶出行提供天氣資訊項(xiàng)目7查詢旅游城市天氣實(shí)現(xiàn)思路將查詢處理部分構(gòu)建成局部組件，作為根組件的子組件根組件通過props將所選區(qū)域里的城市列表傳遞給子組件，并將其作為用戶選擇城市的依據(jù)利用axios全局配置，對(duì)訪問站點(diǎn)、請(qǐng)求或響應(yīng)失敗處理進(jìn)行統(tǒng)一設(shè)置根據(jù)天氣查詢參數(shù)要求，利用axios.get函數(shù)發(fā)起網(wǎng)絡(luò)請(qǐng)求，獲得天氣情況數(shù)據(jù)使用LiveServer插件對(duì)程序功能進(jìn)行測(cè)試項(xiàng)目7查詢旅游城市天氣任務(wù)7-1構(gòu)建頁面布局項(xiàng)目7查詢旅游城市天氣任務(wù)7-2實(shí)現(xiàn)天氣預(yù)報(bào)查詢注冊(cè)并成為“天氣API”用戶定義查詢處理組件項(xiàng)目7查詢旅游城市天氣項(xiàng)目7查詢旅游城市天氣同步訓(xùn)練利用“天氣API”氣象數(shù)據(jù)接口和axios.get函數(shù)，編寫一個(gè)天氣查詢頁面，要求該頁面中能夠根據(jù)用戶輸入的城市，查詢?cè)摮鞘兴募咎鞖?，包括四季平均高溫、低溫和降水量（單位為mm）指標(biāo)。要求使用axios全局配置baseURL設(shè)置“天氣API”氣象數(shù)據(jù)接口訪問地址。單元小結(jié)Promise是一種異步編程的解決方案，有效地解決了“回調(diào)地獄”問題。我們可以將它理解為一個(gè)容器，里面包裹著某個(gè)事件（異步任務(wù)），這個(gè)事件會(huì)在將來的某個(gè)時(shí)刻發(fā)生，同時(shí)它還會(huì)保存事件的結(jié)果。從語法上說，Promise是一個(gè)對(duì)象，利用它可以獲取異步操作的消息。它采用鏈?zhǔn)秸{(diào)用方式實(shí)現(xiàn)多異步任務(wù)的順序執(zhí)行。async/await是在Promise基礎(chǔ)上的異步編程解決方案。它采用同步寫法實(shí)現(xiàn)多異步任務(wù)的順序執(zhí)行。Promise和async/await都常見于Vue組件開發(fā)的異步流程處理，但后者在多異步任務(wù)順序執(zhí)行的實(shí)現(xiàn)上更具優(yōu)勢(shì)。Vue通過axios來實(shí)現(xiàn)對(duì)異步請(qǐng)求的操作。axios是一個(gè)強(qiáng)大的HTTP庫，可以用在瀏覽器或Node.js中，它提供了豐富的API，支持PromiseAPI、異步請(qǐng)求處理、JSON數(shù)據(jù)自動(dòng)轉(zhuǎn)換等。

單元小結(jié)axios處理網(wǎng)絡(luò)請(qǐng)求的工作主要包括提交請(qǐng)求和接收響應(yīng)結(jié)果兩個(gè)部分，提交請(qǐng)求需要進(jìn)行請(qǐng)求配置，包括請(qǐng)求地址（url）、請(qǐng)求參數(shù)（params/data）、請(qǐng)求類型（GET、POST等）、自定義請(qǐng)求頭（headers）等；接收響應(yīng)結(jié)果則需要了解響應(yīng)對(duì)象結(jié)構(gòu)，讀取所需的響應(yīng)結(jié)果數(shù)據(jù)，響應(yīng)對(duì)象的常用屬性有響應(yīng)結(jié)果（data）、響應(yīng)的HTTP狀態(tài)碼（status）和響應(yīng)的HTTP狀態(tài)信息（statusText）。

axios的用法有：（1）傳遞請(qǐng)求配置對(duì)象處理任何類型的HTTP請(qǐng)求；（2）針對(duì)不同HTTP請(qǐng)求，使用請(qǐng)求別名的快捷方式，如axios.get()等。axios的全局配置，為開發(fā)者提供了網(wǎng)絡(luò)請(qǐng)求通用配置的設(shè)置途徑，結(jié)合具體的網(wǎng)絡(luò)請(qǐng)求需要，實(shí)現(xiàn)了類同配置的復(fù)用與具體配置的定制的并舉。常用全局配置選項(xiàng)有請(qǐng)求IP和端口號(hào)（baseURL）、請(qǐng)求頭部（headers）