第11章axios數(shù)據(jù)請(qǐng)求11.1初識(shí)axios11.2axios的基本用法11.3axios請(qǐng)求配置11.4并發(fā)請(qǐng)求11.5創(chuàng)建axios實(shí)例11.6配置默認(rèn)值11.7axios攔截器11.8實(shí)訓(xùn)：銷售額查詢頁(yè)面了解axios的特征、安裝與引入方法掌握axios的常用請(qǐng)求方式、JSON數(shù)據(jù)的使用與跨域請(qǐng)求的實(shí)現(xiàn)掌握axios請(qǐng)求配置的用法掌握axios并發(fā)請(qǐng)求、創(chuàng)建axios實(shí)例與配置axios默認(rèn)值的方法掌握攔截器的創(chuàng)建方法引言在頁(yè)面渲染中，前端頁(yè)面所需要的數(shù)據(jù)通常需要從服務(wù)器端獲取，這便涉及到與服務(wù)器的通信，axios是一種常用的數(shù)據(jù)請(qǐng)求方法，可以便捷地發(fā)送HTTP請(qǐng)求，并且處理響應(yīng)數(shù)據(jù)。同時(shí)，axios也是Vue官方所推薦使用的數(shù)據(jù)請(qǐng)求方法。axios可以快速在Vue3項(xiàng)目中中實(shí)現(xiàn)數(shù)據(jù)的異步獲取和提交，從而提高應(yīng)用程序的交互性和用戶體驗(yàn)。本章將帶領(lǐng)讀者認(rèn)識(shí)和學(xué)習(xí)axios相關(guān)知識(shí)，快速掌握在Vue3項(xiàng)目中使用axios進(jìn)行通信。11.1初識(shí)axiosaxios的特征axios的安裝與引入axios是一個(gè)基于Promise的HTTP客戶端庫(kù)，它可以用于發(fā)送HTTP請(qǐng)求并處理響應(yīng)。它提供了簡(jiǎn)單易用的API，使得開發(fā)者可以輕松地發(fā)送get、post、put、delete等HTTP請(qǐng)求，并支持?jǐn)r截請(qǐng)求和響應(yīng)，以及轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)。在Vue中，可以將axios與組件的生命周期鉤子函數(shù)結(jié)合使用，以便在組件掛載時(shí)獲取數(shù)據(jù)并更新視圖。另外，axios還提供了攔截器，可以在請(qǐng)求或響應(yīng)被處理前對(duì)它們進(jìn)行攔截和處理，以便快捷地對(duì)請(qǐng)求或響應(yīng)進(jìn)行全局處理。11.1.1axios的特征11.1初識(shí)axiosaxios具有以下特征可以在瀏覽器中發(fā)送XMLHttpRequests；可以在Node.js發(fā)送HTTP請(qǐng)求；支持PromiseAPI；攔截請(qǐng)求和響應(yīng)；轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)；能夠取消請(qǐng)求；自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)；客戶端支持保護(hù)安全免受XSRF攻擊。11.1.1axios的特征11.1初識(shí)axios1.安裝axiosaxios可以使用CDN方式引入，也可以使用npm或yarn命令進(jìn)行安裝。（1）使用CDN方式使用CDN方式直接引入axios，代碼（2）使用npm或yarn方式使用npm安裝axios，命令<scriptsrc="/axios/dist/axios.min.js"></script>npminstallaxios--save使用yarn安裝axios，命令yarnaddaxios--save11.1.1axios的特征11.1初識(shí)axios2.引入axiosaxios與vue-axios插件安裝完成后，需要在項(xiàng)目的main.js文件中引入axios與vue-axios。在main.js中全局引入axios，代碼import{createApp}from'vue'importAppfrom'./App.vue'//引入axios與vue-axiosimportaxiosfrom'axios'importVueAxiosfrom'vue-axios'//注冊(cè)axios，進(jìn)行應(yīng)用掛載createApp(App).use(VueAxios,axios).mount('#app')11.1.1axios的特征11.1初識(shí)axios2.引入axios將axios引入到項(xiàng)目中后，接下來(lái)可以在組件中使用axios來(lái)進(jìn)行數(shù)據(jù)請(qǐng)求。例如，在組件的created鉤子函數(shù)中使用axios進(jìn)行g(shù)et請(qǐng)求，代碼exportdefault{created(){axios.get('/api/data').then(function(response){console.log(response);}).catch(function(error){console.log(error);})}}11.1.1axios的特征11.1初識(shí)axios11.2axios的基本用法axios的常用請(qǐng)求方式請(qǐng)求JSON數(shù)據(jù)跨域請(qǐng)求數(shù)據(jù)axios的常用請(qǐng)求方式主要有5種，包括get、post、put、patch和delete，接下來(lái)將介紹axios的這5種方式的使用方法。1.get請(qǐng)求get請(qǐng)求用于獲取數(shù)據(jù)，從指定的資源請(qǐng)求數(shù)據(jù)，并返回實(shí)體對(duì)象，代碼11.2.1axios的常用請(qǐng)求方式11.2axios的基本用法constaxios=require('axios');//向給定ID的用戶發(fā)起請(qǐng)求axios.get('/user?id=12345&name=wuyi').then(function(response){//處理成功情況

console.log(response);}).catch(function(error){//處理錯(cuò)誤情況

console.log(error);})1.get請(qǐng)求get請(qǐng)求還有另一種參數(shù)形式，即傳遞一個(gè)配置對(duì)象作為參數(shù)。在配置對(duì)象中使用params參數(shù)來(lái)指定要攜帶的數(shù)據(jù)。代碼11.2.1axios的常用請(qǐng)求方式11.2axios的基本用法axios.get('/user',{params:{id:12345,name:wuyi}}).then(function(response){console.log(response);}).catch(function(error){console.log(error);})2.post請(qǐng)求post請(qǐng)求是向指定資源提交數(shù)據(jù)進(jìn)行處理請(qǐng)求（例如提交表單或者上傳文件）。post請(qǐng)求一般分為2種類型，如下所示。

form-data表單提交，圖片上傳、文件上傳時(shí)用該類型比較多。

application/json一般是用于ajax異步請(qǐng)求。11.2.1axios的常用請(qǐng)求方式11.2axios的基本用法2.post請(qǐng)求post請(qǐng)求要比get請(qǐng)求多一個(gè)參數(shù)，該參數(shù)是一個(gè)對(duì)象，對(duì)象中的屬性就是要發(fā)送的數(shù)據(jù)。post請(qǐng)求的示例代碼11.2.1axios的常用請(qǐng)求方式11.2axios的基本用法axios.post('/user',{firstName:'yi',lastName:'wu'}).then(function(response){console.log(response);}).catch(function(error){console.log(error);});3.put請(qǐng)求put請(qǐng)求用于更新數(shù)據(jù)，從客戶端向服務(wù)器傳送的數(shù)據(jù)將替代指定文檔的內(nèi)容，代碼11.2.1axios的常用請(qǐng)求方式11.2axios的基本用法axios.put('/user',{firstName:'yi',lastName:'wu'}).then(function(response){console.log(response);}).catch(function(error){console.log(error);});4.patch請(qǐng)求patch請(qǐng)求也可以用于更新數(shù)據(jù)，是對(duì)put請(qǐng)求的補(bǔ)充，用于對(duì)已知資源進(jìn)行局部更新，代碼11.2.1axios的常用請(qǐng)求方式11.2axios的基本用法axios.patch('/user',{firstName:'yi',lastName:'wu'}).then(function(response){console.log(response);}).catch(function(error){console.log(error);});5.delete請(qǐng)求delete請(qǐng)求是向服務(wù)器發(fā)起請(qǐng)求并刪除指定的頁(yè)面或數(shù)據(jù)。使用axios發(fā)送delete請(qǐng)求時(shí)，攜帶的參數(shù)可以使用明文的方式或者是封裝為對(duì)象的方式進(jìn)行提交，代碼11.2.1axios的常用請(qǐng)求方式11.2axios的基本用法//參數(shù)以明文方式提交,直接從url中刪除axios.delete('/user',{params:{id:12345,name:wuyi}}).then(function(response){console.log(response);}).catch(function(error){console.log(error);})//參數(shù)以封裝對(duì)象方式提交，從請(qǐng)求體中刪除axios.delete('/user',{data:{id:12345,name:wuyi}}).then(function(response){console.log(response);}).catch(function(error){console.log(error);})首先使用VueCLI創(chuàng)建一個(gè)名為“request_data”的項(xiàng)目，配置選項(xiàng)默認(rèn)選擇即可。項(xiàng)目創(chuàng)建完成之后，使用npm方式安裝axios與vue-axios插件，并在main.js文件中全局引入axios，具體操作請(qǐng)參考11.1.2節(jié)“axios的安裝與引入”。完成以上步驟之后，在項(xiàng)目的public文件夾下創(chuàng)建一個(gè)data文件夾，并在該文件夾中創(chuàng)建一個(gè)JSON文件info.json。接下來(lái)，在APP.vue文件中使用get請(qǐng)求向info.json文件請(qǐng)求JSON數(shù)據(jù)，具體代碼11.2.2請(qǐng)求JSON數(shù)據(jù)11.2axios的基本用法首先使用VueCLI創(chuàng)建一個(gè)名為“request_data”的項(xiàng)目，配置選項(xiàng)默認(rèn)選擇即可。項(xiàng)目創(chuàng)建完成之后，使用npm方式安裝axios與vue-axios插件，并在main.js文件中全局引入axios，具體操作請(qǐng)參考11.1.2節(jié)“axios的安裝與引入”。完成以上步驟之后，在項(xiàng)目的public文件夾下創(chuàng)建一個(gè)data文件夾，并在該文件夾中創(chuàng)建一個(gè)JSON文件info.json。接下來(lái)，在APP.vue文件中使用get請(qǐng)求向info.json文件請(qǐng)求JSON數(shù)據(jù)，具體代碼11.2.2請(qǐng)求JSON數(shù)據(jù)11.2axios的基本用法例11-1具體代碼見(jiàn)源碼包/ch11/request_datainfo.json文件的代碼11.2.2請(qǐng)求JSON數(shù)據(jù)11.2axios的基本用法例11-1具體代碼見(jiàn)源碼包/ch09/request_data[{"name":"小花","age":"18","sex":"female"},{"name":"小光","age":"20","sex":"male"},{"name":"小亮","age":"19","sex":"male"}]info.json文件的代碼11.2.2請(qǐng)求JSON數(shù)據(jù)11.2axios的基本用法例11-1具體代碼見(jiàn)源碼包/ch09/request_data<template><divclass="app"><h2>axios使用get請(qǐng)求JSON數(shù)據(jù)</h2><ul><!--v-for指令以循環(huán)的方式渲染JSON數(shù)據(jù)列表--><liv-for="(item,index)ofjsonData":key="index">

姓名：{{}}，年齡：{{item.age}}，性別：{{item.sex}}</li></ul></div></template>//使用import語(yǔ)句引入axios庫(kù)importaxiosfrom'axios'exportdefault{name:'APP',data(){return{jsonData:[]……axios.get('http://localhost:8080/data/info.json').then(response=>{//將數(shù)據(jù)存儲(chǔ)在變量jsonData中

this.jsonData=response.data;......}在瀏覽器中運(yùn)行request_data項(xiàng)目，并打開控制臺(tái)，可以發(fā)現(xiàn)控制臺(tái)中已打印出info.json文件中的內(nèi)容。在request_data項(xiàng)目使用get()方法請(qǐng)求JSON數(shù)據(jù)的運(yùn)行效果如圖11.2.2請(qǐng)求JSON數(shù)據(jù)11.2axios的基本用法例11-1在實(shí)際項(xiàng)目開發(fā)中，通常需要跨域請(qǐng)求數(shù)據(jù)，接下來(lái)將在例11-1的request_data項(xiàng)目中的components文件夾下新建一個(gè)HelloWorld組件，用于實(shí)現(xiàn)跨域請(qǐng)求數(shù)據(jù)，該案例中使用的接口為開源的獲取城市信息接口。首先需要在vue.config.js文件中配置內(nèi)容，設(shè)置反向代理11.2.3跨域請(qǐng)求數(shù)據(jù)11.2axios的基本用法vue.config.js文件的代碼11.2.3跨域請(qǐng)求數(shù)據(jù)11.2axios的基本用法const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,devServer:{proxy:{//api是后端接口的路徑

'/api':{//target是被'/api'代理的后端數(shù)據(jù)接口的地址

target:'/film/api/v1/',changeOrigin:true,//允許跨域

pathRewrite:{//任何以'/api'開頭的URL的'/api'部分都將被替換為空字符串

'^/api':''}}}}})接下來(lái)，在request_data項(xiàng)目的HelloWorld.vue組件中實(shí)現(xiàn)跨域請(qǐng)求數(shù)據(jù)，HelloWorld.vue組件的代碼11.2.3跨域請(qǐng)求數(shù)據(jù)11.2axios的基本用法<template><divclass="hello"><hr><h2>axios跨域請(qǐng)求數(shù)據(jù)</h2><h3>當(dāng)前城市：{{name}}</h3><p>

城市ID：{{cityId}}，城市名稱：{{name}}，城市拼音：{{pinyin}}</p></div></template>……mounted(){axios.get('/api/getCitiesInfo').then(response=>{console.log('跨域請(qǐng)求數(shù)據(jù)',response);//將數(shù)據(jù)存儲(chǔ)于定義的各個(gè)變量中

this.cityId=response.data.data.cities[0].cityId;=response.data.data.cities[0].name;this.pinyin=response.data.data.cities[0].pinyin;}).catch(error=>{console.log(error);......例11-1在瀏覽器中運(yùn)行request_data項(xiàng)目，按下F12鍵打開控制臺(tái)，切換至Console選項(xiàng)，可以發(fā)現(xiàn)控制臺(tái)中已打印出API接口返回的響應(yīng)數(shù)據(jù)內(nèi)容。在request_data項(xiàng)目使用axios跨域請(qǐng)求數(shù)據(jù)的運(yùn)行效果如圖11.2axios的基本用法例11-111.2.3跨域請(qǐng)求數(shù)據(jù)11.3axios請(qǐng)求配置axios配置對(duì)象配置對(duì)象的應(yīng)用axios庫(kù)為請(qǐng)求提供了配置對(duì)象，如下所示:URL：請(qǐng)求路徑，類型為String；baseURL：請(qǐng)求的域名基本地址，類型為String；timeout：請(qǐng)求超時(shí)時(shí)長(zhǎng)，單位ms，類型為Number；method：請(qǐng)求方法，類型為String；headers：設(shè)置請(qǐng)求頭，類型為Object；params：請(qǐng)求參數(shù)，將參數(shù)拼接在URL上，類型為Object；data：請(qǐng)求參數(shù)，將參數(shù)放到請(qǐng)求體中，類型為Object。在發(fā)送HTTP請(qǐng)求之前，需要配置axios實(shí)例，這些配置通常放在一個(gè)對(duì)象里。常用配置對(duì)象的為url、method、headers等，其中url為必選項(xiàng)，如果沒(méi)有指定method參數(shù)，則請(qǐng)求將默認(rèn)使用get()方法11.3.1axios配置對(duì)象11.3axios請(qǐng)求配置以get請(qǐng)求和post請(qǐng)求為例，向axios傳遞參數(shù)實(shí)現(xiàn)get和post請(qǐng)求效果，示例代碼11.3.2配置對(duì)象的應(yīng)用11.3axios請(qǐng)求配置//通過(guò)axios發(fā)起一個(gè)get請(qǐng)求(默認(rèn)請(qǐng)求方式)axios('/user/12345');//發(fā)起一個(gè)post請(qǐng)求axios({method:'post',url:'/user/12345',data:{firstName:'yi',lastName:'wu'}});//在Node.js用get請(qǐng)求獲取遠(yuǎn)程圖片axios({method:'get',url:'http://bit.ly/2mTM3nY',responseType:'stream'}).then(function(response){response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))});11.4并發(fā)請(qǐng)求axios提供了并發(fā)請(qǐng)求的方法，使用Promise.all()方法實(shí)現(xiàn)，可以同時(shí)進(jìn)行多個(gè)請(qǐng)求，并統(tǒng)一處理返回值，代碼11.4并發(fā)請(qǐng)求functiongetUserAccount(){returnaxios.get('/user/12345');}functiongetUserPermissions(){returnaxios.get('/user/12345/permissions');}Promise.all([getUserAccount(),getUserPermissions()]).then(function(results){//2個(gè)請(qǐng)求現(xiàn)在皆執(zhí)行完成

constacct=results[0];//acct是getUserAccount()請(qǐng)求的響應(yīng)結(jié)果

constperm=results[1];//perm是getUserPermissions()請(qǐng)求的響應(yīng)結(jié)果

});11.5創(chuàng)建axios實(shí)例當(dāng)axios需要請(qǐng)求多個(gè)不同的后端接口地址，并且axios配置項(xiàng)基本相同時(shí)，可以使用自定義配置調(diào)用axios.create([config])方法創(chuàng)建一個(gè)axios實(shí)例，然后使用該實(shí)例向服務(wù)端發(fā)起請(qǐng)求，如此便不用每次請(qǐng)求時(shí)再重新設(shè)置配置選項(xiàng)，代碼11.5創(chuàng)建axios實(shí)例constinstance=axios.create({baseURL:'/api/',timeout:1000,headers:{'X-Custom-Header':'foobar'}});11.6配置默認(rèn)值1.全局axios默認(rèn)值使用axios請(qǐng)求時(shí)，對(duì)于相同的配置選項(xiàng)，可以設(shè)置為全局的axios默認(rèn)值。配置選項(xiàng)在項(xiàng)目的main.js文件中設(shè)置，示例代碼11.6配置默認(rèn)值axios.defaults.baseURL='';mon['Authorization']=AUTH_TOKEN;axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';2.自定義實(shí)例默認(rèn)值在自定義的axios實(shí)例中也可以配置默認(rèn)值，這些配置選項(xiàng)只有在使用該實(shí)例發(fā)起請(qǐng)求時(shí)才生效。示例代碼11.6配置默認(rèn)值//創(chuàng)建實(shí)例時(shí)配置默認(rèn)值constinstance=axios.create({baseURL:''});//創(chuàng)建實(shí)例后修改默認(rèn)值mon['Authorization']=AUTH_TOKEN;3.配置的優(yōu)先級(jí)配置將會(huì)按優(yōu)先級(jí)進(jìn)行合并。優(yōu)先級(jí)順序是先在lib/defaults.js中找到的庫(kù)的默認(rèn)值，然后是實(shí)例的defaults屬性，最后是請(qǐng)求的config參數(shù)，后者的優(yōu)先級(jí)要高于前者。示例代碼11.6配置默認(rèn)值//創(chuàng)建實(shí)例時(shí)配置默認(rèn)值//使用庫(kù)提供的默認(rèn)配置創(chuàng)建實(shí)例//此時(shí)超時(shí)配置的默認(rèn)值是`0`constinstance=axios.create();//重寫庫(kù)的超時(shí)默認(rèn)值//現(xiàn)在，所有使用此實(shí)例的請(qǐng)求都將等待2.5秒，然后才會(huì)超時(shí)instance.defaults.timeout=2500;//重寫此請(qǐng)求的超時(shí)時(shí)間，因?yàn)樵撜?qǐng)求需要很長(zhǎng)時(shí)間instance.get('/longRequest',{timeout:5000});constinstance=axios.create({baseURL:''});//創(chuàng)建實(shí)例后修改默認(rèn)值mon['Authorization']=AUTH_TOKEN;11.7axios攔截器1.創(chuàng)建axios攔截器創(chuàng)建axios攔截器的示例代碼11.7axios攔截器//添加請(qǐng)求攔截器erceptors.request.use(function(config){//在發(fā)送請(qǐng)求之前做些什么

returnconfig;},function(error){//對(duì)請(qǐng)求錯(cuò)誤做些什么

returnPromise.reject(error);});//添加響應(yīng)攔截器erceptors.response.use(function(response){//2xx范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。

//對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么

returnresponse;},function(error){//超出2xx范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。

//對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么

returnPromise.reject(error);});2.移除axios攔截器如果想要移除攔截器，則可以執(zhí)行以下代碼11.7axios攔截器constmyInterceptor=erceptors.request.use(function(){/*...*/});erceptors.request.eject(myInterceptor);3.axios實(shí)例添加攔截器可以為自定義的axios實(shí)例添加攔截器，代碼11.7axios攔截器constinstance=axios.create();erceptors.request.use(function(){/*...*/});11.8實(shí)訓(xùn)：銷售額查詢頁(yè)面銷售額查詢頁(yè)面結(jié)構(gòu)簡(jiǎn)圖實(shí)現(xiàn)銷售額查詢頁(yè)面效果本案例將制作一個(gè)銷售額查詢頁(yè)面，頁(yè)面主要由根組件（App組件）、FirstQuarter組件、SecondQuarter組件、ThirdQuarter組件、FourthQuarter組件以及ElementPlus內(nèi)置