vue.js

2024.7vue.js主講：溫謙第11章AJAX與Axios（下）認(rèn)識(shí)AxiosAxios的基礎(chǔ)用法DEMOGET與POSTDEMO嵌套請(qǐng)求與并發(fā)請(qǐng)求DEMOAxios的進(jìn)階用法實(shí)例的相關(guān)配置錯(cuò)誤處理和攔截器DEMO實(shí)現(xiàn)自動(dòng)提示的文本框模擬百度的“數(shù)據(jù)加載中”效果第11章

AJAX與Axios（下）

第11章AJAX與Axios（下）認(rèn)識(shí)Axios如果使用VueCLI腳手架工具創(chuàng)建的項(xiàng)目，可以使用npm安裝Axios：npminstallaxios--save如果為了調(diào)試一些簡(jiǎn)單頁(yè)面，也可以直接在頁(yè)面中引入axios.js文件，或者直接使用CDN：<scriptsrc="/axios/dist/axios.min.js"></script>第11章AJAX與Axios（下）Axios的基礎(chǔ)用法importAxiosfrom'axios'Axios.get(url[,config]).then()Axios.post(url[,data[,config]]).then()第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）GET與POSTGET和POST區(qū)別POST請(qǐng)求參數(shù)的傳遞方式HTTP方法與RESTGETPOSTPUTDELETEOPTIONSHEADTRACECONNENT第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）嵌套請(qǐng)求與并發(fā)請(qǐng)求并發(fā)請(qǐng)求：

Axios.all([Axios.get(get1),Axios.get(get2)]).then(Axios.spread((Res1,Res2)=>{console.log(Res1,Res2)}))嵌套請(qǐng)求：

//外層Axios.get(URL).then(//內(nèi)層(response)=>Axios.get(URL,參數(shù)).then((response)=>{

//請(qǐng)求成功后要執(zhí)行的內(nèi)容}))第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）Axios的進(jìn)階用法創(chuàng)建實(shí)例其語(yǔ)法如下：constaxios=axios.create({baseURL:'http://localhost:8080',timeout:1000,//設(shè)置超時(shí)時(shí)長(zhǎng)。默認(rèn)請(qǐng)求未返回超過(guò)一秒，接口就超時(shí)了,//其他配置項(xiàng)……});第11章AJAX與Axios（下）實(shí)例的相關(guān)配置配置項(xiàng)舉例說(shuō)明url'/user'用于請(qǐng)求服務(wù)器的URLmethod'get'創(chuàng)建請(qǐng)求時(shí)使用的方法，還可以是'post','put','patch','delete',默認(rèn)是getbaseURL'http://localhost:8080'將自動(dòng)加在url前面，除非url是一個(gè)絕對(duì)URLheaders{'content-type':'application/x-www-form-urlencoded'}是即將被發(fā)送的自定義請(qǐng)求頭params{id:1}請(qǐng)求參數(shù)拼接在url后面data{id:1}請(qǐng)求參數(shù)放在請(qǐng)求體里timeout1000指定請(qǐng)求超時(shí)的毫秒數(shù)(0表示無(wú)超時(shí)時(shí)間)，如果請(qǐng)求花費(fèi)了超過(guò)timeout的時(shí)間，請(qǐng)求將被中斷，為了不阻塞后面要執(zhí)行的內(nèi)容responseType'json'表示希望服務(wù)器響應(yīng)的數(shù)據(jù)類(lèi)型，還可以是'arraybuffer','blob','document','text','stream'，默認(rèn)是json第11章AJAX與Axios（下）錯(cuò)誤處理響應(yīng)異常請(qǐng)求異常攔截器請(qǐng)求攔截器響應(yīng)攔截器第11章AJAX與Axios（下）實(shí)例：實(shí)現(xiàn)自動(dòng)提示的文本框第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）練習(xí)：模擬百度的“數(shù)據(jù)加載中”效果第11章AJAX與Axios（下）DEMO第11章

AJAX與Axios（下）認(rèn)識(shí)AxiosAxios的基礎(chǔ)用法DEMOGET