《Vue.js3Web開發(fā)案例教程（在線實訓版）》 課件 11-b AJAX與Axios（下）

vue.js

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

AJAX與Axios（下）

第11章AJAX與Axios（下）認識Axios如果使用VueCLI腳手架工具創(chuàng)建的項目，可以使用npm安裝Axios：npminstallaxios--save如果為了調(diào)試一些簡單頁面，也可以直接在頁面中引入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請求參數(shù)的傳遞方式HTTP方法與RESTGETPOSTPUTDELETEOPTIONSHEADTRACECONNENT第11章AJAX與Axios（下）DEMO第11章AJAX與Axios（下）嵌套請求與并發(fā)請求并發(fā)請求：

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

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

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

AJAX與Axios（下）認識AxiosAxios的基礎(chǔ)用法DEMOGET