第8章 axios異步請求

第8章

axios異步請求8.1.1

axios簡介axios是一個基于Promise的HTTP庫,可用于瀏覽器和Node.js環境跨端支持攔截機制PromiseAPI瀏覽器創建XMLHttpRequests,Node,js創建HTTP請求可攔截請求和響應,統一處理邏輯原生支持Promise鏈式調用優雅處理異步數據轉換請求取消安全防護自動轉換請求數據和響應數據客戶端支持防御XSRF攻擊,自動轉換JSON數據支持取消正在進行的請求8.1.2

安裝axiosnpm安裝bower安裝CDN引入npminstallaxiosscript標簽引入適用于快速原型開發適用于Vue3腳手架項目,推薦方式可配合vue-axios插件一起安裝bowerinstallaxios適用于傳統前端項目無需構建工具,直接在HTML中引入npminstallaxiosvue-axios安裝vue-axios后,組件內可通過this.axios調用8.1.3

基本使用方法GET請求POST請求通過URL傳遞參數,使用params配置對象傳遞查詢參數;成功時調用then()回調處理響應;失敗時調用catch()回調處理錯誤通過請求體發送數據,比get多一個data參數;同樣使用then/catch處理響應與錯誤關鍵語法:axios.post(url,data)關鍵語法:axios.get(url,{params})并發請求使用axios.all()同時發起多個請求;配合axios.spread()將結果展開分發關鍵語法:axios.all(fn1,fn2).then(axios.spread(callback))8.2AxiosAPIaxios(config)通過配置對象指定method、url、data等參數適用于需要靈活配置的復雜請求場景關鍵語法:axios(method,url,data})config配置發送請求axios(url[,config])axios(url[,config])axios(url[,config])直接傳入URL,默認使用GET方法簡化寫法,適用于簡單請求axios(\關鍵語法:接收響應config方式是axios最靈活的調用方式,所有別名方法底層都基于此請求方法別名創建實例無需在config中指定method,直接使用對應方法使用axios.create()創建自定義實例可預設baseURL、timeout、headers等配置查詢數據數據數據更新數據更新數據刪除數據常用授求axiosaxios.get(url)axios.post(ur,data)axios.put(url,data)axios.delete(url)axios.request(config)關鍵語語:constinstance=axios.createlbaseURL,timeout,headers})實例上同樣可使用所有別名方法不同模塊可創建不同實例,配置互不干擾每個別名函數自動設置對應的HTTP方法8.2AxiosAPI8.3

適配網絡請求urlmethod請求方法,請求的服務器地址,必填參數默認值為getbaseURL自動拼接在url前面便于使用相對路徑headers自定義請求頭信息dataparamsURL查詢參數,以對象形式傳遞請求體數據,用于POST/PUT/PATCHtimeout請求超時毫秒數,0表示無超時responseTypejn響應數據類型,默認jsonurl為必填項,其余配置均有默認值8.3適配網絡請求響應結構默認配置data:服務器提供的響應數據全局默認值:axios.defaults.baseURLstatus:HTTP狀態碼,如200axios.defaults.headers:設置通用請求頭實例默認值:創建實例時預設配置statusText:HTTP狀態信息,如OK創建后修改:instance.defaults.headersheaders:服務器響應頭信息config:請求時的配置信息配置優先級:請求config>實例defaults>庫默認值8.4

攔截器發送請求請求攔截器服務器響應攔截器then/catch處理請求攔截器響應攔截器在請求發送前攔截,可修改請求配置添加自定義headers、轉換請求數據關鍵語法erceptors.request.use(onFulfilled,onRejected)在響應到達then/catch前攔截統一處理響應數據、錯誤狀態碼關鍵語法erceptors.response.use(onFulfilled,onRejected)使用eject()可移除已添加的攔截器在鍵語語法Xeaix用戶有拉測加可設產仲需臺藍明浙,連備分享符合可請到數的用戶導清勵,更扶攔截器8.4

適配網絡請求錯誤處理取消請求使用CancelToken創建取消令牌關鍵語法constsource=CancelTokensource()Ocatch回調中區分三種錯誤類型:error.response服務器返回了響應,狀態碼超出范圍可獲取status、data、headers等錯誤詳情(代碼樣式標注);第三點將token傳入配置配置的cancelToken領域第四點利用source.cancel(message)source.cancel(message)sour