本篇文章為大家展示了如何在Vue項(xiàng)目中使用axios,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)建站專注于浉河網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供浉河營(yíng)銷型網(wǎng)站建設(shè),浉河網(wǎng)站制作、浉河網(wǎng)頁設(shè)計(jì)、浉河網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù),打造浉河網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供浉河網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
Axios 是一個(gè)用于實(shí)現(xiàn)網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的JavaScript庫,可以用在網(wǎng)頁和 node.js 中,用于創(chuàng)建 XMLHttpRequests,vue官方支持使用axios代替vue--resourse來實(shí)現(xiàn)網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求。
使用前需要在你的項(xiàng)目中安裝axios,例如通過npm安裝庫:
npm install --save axios
接著在項(xiàng)目中引入axios:
import axios from 'axios'
直接使用axios的全局變量來調(diào)用get方法,get中第一個(gè)參數(shù)傳遞url,第二個(gè)參數(shù)是相關(guān)配置,在其中可以傳遞params參數(shù)(參數(shù)以?形式加在url末尾),進(jìn)行header的設(shè)置等。使用.then接收返回值,可以采用函數(shù)來處理返回結(jié)果res,其中res.data或者res.body是返回的數(shù)據(jù)。使用.catch捕獲異常,并可以打印錯(cuò)誤信息參數(shù)error。
axios.get('data/zodiac.json',{ params:{ id:"101" }, header:{ token:"axios" } }).then(res =>{ this.msg=res.data; }).catch(error =>{ console.log(error); })
post方法調(diào)用、回掉、異常捕獲的使用與get類似。不同的是其參數(shù)分為三個(gè),第一個(gè)是url地址,第二個(gè)是要傳遞的數(shù)據(jù),第三個(gè)是傳輸選項(xiàng)配置。與get方法不同,post專門使用第二個(gè)參數(shù)進(jìn)行數(shù)據(jù)傳遞,而不像get中將數(shù)據(jù)設(shè)置在配置選項(xiàng)params中。
axPost(){ axios.post('./data/test.php', //url { //發(fā)送的數(shù)據(jù) userId:'105' }, { //option選項(xiàng) headers:{ token:"axPost" } } ).then(res =>{ //接收結(jié)果 this.msg=res.data; }).catch(err=>{ //處理錯(cuò)誤 this.msg=err; }) }
也可以直接使用http進(jìn)行數(shù)據(jù)請(qǐng)求,直接進(jìn)行url、method、data、headers、params等的設(shè)置,例如使用http發(fā)送post請(qǐng)求:
axios({ url:"http://localhost:63342/Web/Learning/Javascript/Vue/VueStart/data/zodiac.json", method:"post", data:{ userId:"106" }, headers:{ token:"axHttp" } }).then(res=>{ this.msg=res.data; })
axios也提供了在網(wǎng)絡(luò)請(qǐng)求發(fā)送前與數(shù)據(jù)返回時(shí)進(jìn)行攔截的函數(shù)interceptors,以便進(jìn)行相關(guān)處理。例如在發(fā)送前使用request.use攔截,進(jìn)行你想要的執(zhí)行的操作后再將config返回出去,在請(qǐng)求返回時(shí)使用response.use進(jìn)行攔截,操作后再將結(jié)果返回:
axios.interceptors.request.use(config =>{ console.log("axois請(qǐng)求"); return config; }); axios.interceptors.response.use(res =>{ console.log("axois回調(diào)"); return res; })
上述內(nèi)容就是如何在Vue項(xiàng)目中使用axios,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁題目:如何在Vue項(xiàng)目中使用axios
鏈接分享:http://bm7419.com/article14/pcdsde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、品牌網(wǎng)站設(shè)計(jì)、小程序開發(fā)、微信小程序、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)