淺談在Vue-cli里基于axios封裝復(fù)用請(qǐng)求
本文介紹了淺談在Vue-cli里基于axios封裝復(fù)用請(qǐng)求，分享給大家，具體如下：
安裝
只用安裝一個(gè)axios就可以了。
npm install axios --save
接口代理設(shè)置
為了請(qǐng)求可以正常發(fā)送，我們一般要進(jìn)行一個(gè)接口代理的配置，這樣可以避免請(qǐng)求跨域，項(xiàng)目打包之后，后端一般也要搭建一個(gè)nginx之類的東西進(jìn)行轉(zhuǎn)發(fā)請(qǐng)求，不然請(qǐng)求會(huì)因?yàn)榭缬騿栴}失敗的。
//文件位置：config/index.js
proxyTable: {
'/api': {
target: 'http://47.95.xxx.246:8080', // 通過(guò)本地服務(wù)器將你的請(qǐng)求轉(zhuǎn)發(fā)到這個(gè)地址
changeOrigin: true, // 設(shè)置這個(gè)參數(shù)可以避免跨域
pathRewrite: {
'/api': '/'
}
},
},
設(shè)置好了之后，當(dāng)你在項(xiàng)目中要調(diào)用 http://47.95.xxx.246:8080 這個(gè)服務(wù)器里面的接口，可以直接用 /api 代替服務(wù)器地址。
發(fā)起請(qǐng)求
main.js入口文件中：
import axios from 'axios';//引入文件 Vue.prototype.$http = axios;//將axios掛載到Vue實(shí)例中的$ajax上面,在項(xiàng)目中的任何位置通過(guò)this.$http使用
沒有封裝發(fā)起請(qǐng)求：
//沒有封裝的時(shí)候，在組件中發(fā)起請(qǐng)求的方式：
this.$ajax({
url:'/api/articles',//api 代理到j(luò)son文件地址，后面的后綴是文件中的對(duì)象或者是數(shù)組
method:'get',//請(qǐng)求方式
//這里可以添加axios文檔中的各種配置
}).then(function (res) {
console.log(res,'成功');
}).catch(function (err) {
console.log(err,'錯(cuò)誤');
})
//還可以像下面這么簡(jiǎn)寫
this.$ajax.get('api/publishContent').then((res) => {
console.log(res,'請(qǐng)求成功')
},(err)=>{
console.log(err,'請(qǐng)求失敗');
});
封裝請(qǐng)求
封裝的時(shí)候，我通常喜歡把請(qǐng)求抽象成三個(gè)文件，文件位置放在src中，只要你能引用到，就沒問題，如下圖所示：
創(chuàng)建三個(gè).js文件，里面我都很認(rèn)真的注釋了，我就直接貼圖片了，在文末我把這三個(gè)文件的地址發(fā)出來(lái)，需要的小伙伴自取。
fetch.js：
url.js:
api.js
在組件里面如何使用接口：
封裝axios文件地址在這里：傳送門
代碼注釋什么的，已經(jīng)蠻多了，跟著文章一步一步走，實(shí)現(xiàn)封裝axios請(qǐng)求，沒毛病的。本文并沒有把很多功能都完整的列出來(lái)，主要是追求一個(gè)上手，剩下的東西，各位小伙伴們可以自行研究。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何實(shí)現(xiàn)響應(yīng)式系統(tǒng)
這篇文章給大家整理了關(guān)于Vue如何實(shí)現(xiàn)響應(yīng)式系統(tǒng)的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
vue?長(zhǎng)列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考
這篇文章主要為大家介紹了vue?長(zhǎng)列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
利用vite創(chuàng)建vue3項(xiàng)目的全過(guò)程及一個(gè)小BUG詳解
Vite作為一個(gè)構(gòu)建工具,提供了一種快速的方法來(lái)構(gòu)建Vue應(yīng)用,而Vue3?則是一個(gè)前端框架,提供了強(qiáng)大的功能來(lái)構(gòu)建和管理前端項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于利用vite創(chuàng)建vue3項(xiàng)目的全過(guò)程及一個(gè)小BUG的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
vue+elementui(對(duì)話框中form表單的reset問題)
這篇文章主要介紹了vue+elementui(對(duì)話框中form表單的reset問題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式
這篇文章主要介紹了vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細(xì)介紹了Vue3中使用富文本編輯器的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考一下2023-10-10
Vue3組合式API中使用forwardRef()函數(shù)
本文主要介紹了Vue3組合式API中使用forwardRef()函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
element的el-table中記錄滾動(dòng)條位置的示例代碼
這篇文章主要介紹了element的el-table中記錄滾動(dòng)條位置的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue+swiper實(shí)現(xiàn)左右滑動(dòng)的測(cè)試題功能
這篇文章主要介紹了vue+swiper實(shí)現(xiàn)左右滑動(dòng)的測(cè)試題功能,本文通過(guò)實(shí)例代碼給大介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10