Vue.js 超詳細(xì)入門與項目實戰(zhàn)（微課視頻版）課件 第09章 接口

第9章接口課件V1.0

教學(xué)內(nèi)容第一節(jié)

接口介紹第二節(jié)全局配置第三節(jié)

數(shù)據(jù)緩存知識目標(biāo)教學(xué)目標(biāo)理解和掌握axios對象安裝的方法掌握axios對象實例創(chuàng)建和配置的過程理解掌握使用axios對象請求數(shù)據(jù)的方法知識點預(yù)覽#節(jié)知識點難點重點應(yīng)用9C09-01接口介紹1、初識和安裝Axios模塊

2、使用Axios模塊C09-02全局配置1、創(chuàng)建axios實例2、配置對象結(jié)構(gòu)3、默認(rèn)配置和響應(yīng)結(jié)構(gòu)4、全局配置axiosC09-03數(shù)據(jù)緩存1、請求數(shù)據(jù)2、緩存數(shù)據(jù)3、緩存優(yōu)化

Axios模塊可以用于瀏覽器和node框架中，在瀏覽器中，它創(chuàng)建XHR對象，在node中它創(chuàng)建http請求；它支持Promise對象中的API，可參攔截、轉(zhuǎn)換、響應(yīng)和取消請求，并自動轉(zhuǎn)成JSON格式數(shù)據(jù)，也支持跨站請求偽造簡稱“XSRF”。

在Vue3中，如果需要發(fā)送異步請求獲取數(shù)據(jù)，通常使用Axios模塊，使用之前必須先安裝該模塊，可以在指定項目的根目錄下局部安裝。初識和安裝Axios模塊

安裝axios模塊的目的是使用該模塊發(fā)送請求，獲取請求返回的數(shù)據(jù)，使用該模塊時，可以傳遞相關(guān)配置項來創(chuàng)建請求，格式有以下幾種：axios(config)上述方法中，只有一個config配置對象，請求時的全部配置項都可以通過該對象進(jìn)行配置，包括url，data，method等axios(url[,config])上述方法是一種簡寫的格式，使用這種格式時，默認(rèn)method是GET方式，通常只用于以GET方式快速請求數(shù)據(jù)時使用別名請求為了更加方便開發(fā)者的使用，可以直接使用請求的別名來完成請求，在axios中，所有支持的請求方法都提供了別名使用Axios模塊雖然在Vue3項目中安裝了axios模塊后，就可以在任意的組件中導(dǎo)入它，并使用它請求數(shù)據(jù)，但考慮到代碼的復(fù)用性和后期維護(hù)的方便，通常自己會創(chuàng)建一個axios實例，并配置這個實例，用于整個項目中的全部數(shù)據(jù)請求，如下所示。//根據(jù)配置對象創(chuàng)建一個axios實例axios.create([config])上述格式代碼中，config是一個可選項的配置對象，如果在使用這個實例時，還有指定的配置對象，那么，指定的配置對象將會與實例的配置對象進(jìn)行合并，并按照配置的優(yōu)先級來執(zhí)行，配置對象的優(yōu)先級執(zhí)行順序如下圖所示：創(chuàng)建axios實例請求的config實例的defaults模塊庫的默認(rèn)值

無論是創(chuàng)建實例化對象，還是發(fā)送請求，配置對象都是必須要考慮的內(nèi)容，在整個axios配置對象中，url屬性是必須要填寫的，method屬性默認(rèn)值為GET方式。

配置對象結(jié)構(gòu)

配置對象可以在發(fā)送請求和實例化axios對象時進(jìn)行配置，也可以通過defaults對象，設(shè)置默認(rèn)的配置值，該配置值的優(yōu)先級高于模塊庫的默認(rèn)值，將會作用于每一個請求，除非在請求時，通過config對象進(jìn)行變更。

創(chuàng)建一個axios實例后，也可以修改設(shè)置的默認(rèn)配置。

除了設(shè)置和修改默認(rèn)配置之外，發(fā)送一次請求后，無論成功與失敗，都將會返回響應(yīng)的數(shù)據(jù)，并通過then或catch函數(shù)來獲取。默認(rèn)配置和響應(yīng)結(jié)構(gòu)

在vue3中，可以使用app.config.globalProperties來注冊全局屬性的對象，其中app是通過createApp()方法創(chuàng)建后的Vue實例化對象，它替代了Vue2中的Vtotype方式，無論是Vue3中的組件式API還是選項式API，都可以輕松訪問到它的值。

如果需要在Vue3項目中全局配置axios對象，只需要在main.js文件中添加如下代碼：import{createApp}from'vue'importAppfrom'./App.vue'importGlobalfrom'./components/ch6/Global'importrouterfrom'./router/index'importrequestfrom'./plugins/axios';letapp=createApp(App);app.config.globalProperties.$http=request;ponent("Global",Global);app.use(router);app.mount('#app')

全局配置axios

配置好全局性的axios實例對象后，請求數(shù)據(jù)就變得十分簡單，只需在組件中，通過this這個對象，調(diào)用$http屬性，就可以獲取配置好的axios實例化對象，再通過這個對象發(fā)送異步請求，并在then函數(shù)中獲取響應(yīng)的數(shù)據(jù)，下面通過一個完整的實例來演示請求過程。請求數(shù)據(jù)

localStorage是HTML5標(biāo)準(zhǔn)中新增的一個用于數(shù)據(jù)緩存的對象，它的最大緩存體積為5M的字符內(nèi)容，它是一個永久性的瀏覽器緩存對象，除非人為刪除，否則，一直存在于瀏覽器中，即使是關(guān)閉瀏覽器后，再次打開，緩存對象依然存在于瀏覽器中。

localStorage有三個常用的操作方法，分別用于設(shè)置、讀取和刪除指定名稱的緩存內(nèi)容。//1.設(shè)置一個key值為cacheData的localStorage對象localStorage.setItem("cacheData","tgrong");//2.獲取key值為cacheData的localStorage對象localStorage.getItem("cacheData");//3.刪除key值為cacheData的localStorage對象localStorage.removeItem("cacheData"))緩存數(shù)據(jù)效果緩存數(shù)據(jù)

雖然緩存數(shù)據(jù)有利用減輕服務(wù)端的頻繁請求，優(yōu)化用戶的數(shù)據(jù)請求體驗，但如果一直使用緩存的數(shù)據(jù)，會使信息過于陳舊，無法滿足數(shù)據(jù)即時性的需求，為了解決這個問題，需要對緩存做使用