vue.js

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

AJAX與Axios（下）

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

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

//外層Axios.get(URL).then(//內層(response)=>Axios.get(URL,參數).then((response)=>{

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

AJAX與Axios（下）認識AxiosAxios的基礎用法DEMOGET