Vue.js前端開發基礎及項目化應用單元七與后端交互——axios目錄認識axiosaxios處理HTTP請求axios攔截器項目6

查詢旅游城市天氣認識axios

axios是一個強大的HTTP庫，可以用在瀏覽器或Node.js中，它提供了豐富的API，支持PromiseAPI、異步請求處理、JSON數據自動轉換等作用：在Vue中，用于實現對異步請求的處理認識axios

axios相關概念異步編程ES6標準采用Promise代替傳統的“回調函數+事件”異步編程方案，以解決“回調地獄”問題ES7在ES6基礎上加以改進，提出了async/await異步編程方案，使得代碼更為簡潔易讀認識axios

PromisePromise，可以理解為一個容器，里面包裹著某個事件（異步任務），這個事件會在將來的某個時刻發生，同時它還會保存事件的結果創建Promise對象的語法認識axiosPromise相關概念Promise對象的狀態：Pending（等待中）、Resolved（已完成）和Rejected（已失敗）Promise對象的參數：resolve和rejectPromise對象的方法：then和catch認識axiosPromise實現異步編程的原理認識axios示例：Promise對象的應用示例運行結果認識axios

示例：Promise實現多異步任務的順序執行在停留2s、4s、6s后，控制臺分別輸出了“第一層嵌套”、“第二層嵌套”、“第三層嵌套”。示例運行結果認識axios

async/await作用：用于在Promise基礎上用同步的寫法來編寫異步任務代碼async是一個修飾符，用于表示某個函數是異步的，并返回一個Promise對象語法：例如：認識axios

async/awaitawait是一個修飾符，用于表示等待某個表達式執行完成，只有該表達式執行完成，才能執行后面的語句，它只能在async函數中使用語法：例如：認識axios

async/awaitasync和await配合使用，以實現多異步任務的順序執行axios安裝與配置

axios特點從瀏覽器中創建XMLHttpRequest對象從Node.js創建HTTP請求支持PromiseAPI攔截請求和響應轉換請求數據和響應數據取消請求自動轉換JSON數據客戶端支持防御XSRF（Cross-SiteRequestForgery，跨站請求偽造）axios安裝與配置axios的安裝CDN安裝方式axiosAPI

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

單元小結axios處理網絡請求的工作主要包括提交請求和接收響應結果兩個部分，提交請求需要進行請求配置，包括請求地址（url）、請求參數（params/data）、請求類型（GET、POST等）、自定義請求頭（headers）等；接收響應結果則需要了解響應對象結構，讀取所需的響應結果數據，響應對象的常用屬性有響應結果（data）、響應的HTTP狀態碼（status）和響應的HTTP狀態信息（statusText）。

axios的用法有：（1）傳遞請求配置對象處理任何類型的HTTP請求；（2）針對不同HTTP請求，使用請求別名的快捷方式，如axios.get()等。axios的全局配置，為開發者提供了網絡請求通用配置的設置途徑，結合具體的網絡請求需要，實現了類同配置的復用與具體配置的定制的并舉。常用全局配置選項有請求IP和端口號（baseURL）、請求頭部（headers）