淺談在Vue-cli里基于axios封裝復(fù)用請求
本文介紹了淺談在Vue-cli里基于axios封裝復(fù)用請求，分享給大家，具體如下：
安裝
只用安裝一個axios就可以了。
npm install axios --save
接口代理設(shè)置
為了請求可以正常發(fā)送，我們一般要進行一個接口代理的配置，這樣可以避免請求跨域，項目打包之后，后端一般也要搭建一個nginx之類的東西進行轉(zhuǎn)發(fā)請求，不然請求會因為跨域問題失敗的。
//文件位置：config/index.js
proxyTable: {
'/api': {
target: 'http://47.95.xxx.246:8080', // 通過本地服務(wù)器將你的請求轉(zhuǎn)發(fā)到這個地址
changeOrigin: true, // 設(shè)置這個參數(shù)可以避免跨域
pathRewrite: {
'/api': '/'
}
},
},
設(shè)置好了之后，當(dāng)你在項目中要調(diào)用 http://47.95.xxx.246:8080 這個服務(wù)器里面的接口，可以直接用 /api 代替服務(wù)器地址。
發(fā)起請求
main.js入口文件中：
import axios from 'axios';//引入文件 Vue.prototype.$http = axios;//將axios掛載到Vue實例中的$ajax上面,在項目中的任何位置通過this.$http使用
沒有封裝發(fā)起請求：
//沒有封裝的時候，在組件中發(fā)起請求的方式：
this.$ajax({
url:'/api/articles',//api 代理到j(luò)son文件地址，后面的后綴是文件中的對象或者是數(shù)組
method:'get',//請求方式
//這里可以添加axios文檔中的各種配置
}).then(function (res) {
console.log(res,'成功');
}).catch(function (err) {
console.log(err,'錯誤');
})
//還可以像下面這么簡寫
this.$ajax.get('api/publishContent').then((res) => {
console.log(res,'請求成功')
},(err)=>{
console.log(err,'請求失敗');
});
封裝請求
封裝的時候，我通常喜歡把請求抽象成三個文件，文件位置放在src中，只要你能引用到，就沒問題，如下圖所示：
創(chuàng)建三個.js文件，里面我都很認(rèn)真的注釋了，我就直接貼圖片了，在文末我把這三個文件的地址發(fā)出來，需要的小伙伴自取。
fetch.js：
url.js:
api.js
在組件里面如何使用接口：
封裝axios文件地址在這里：傳送門
代碼注釋什么的，已經(jīng)蠻多了，跟著文章一步一步走，實現(xiàn)封裝axios請求，沒毛病的。本文并沒有把很多功能都完整的列出來，主要是追求一個上手，剩下的東西，各位小伙伴們可以自行研究。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
我們使用nginx部署Vue項目,實質(zhì)上就是將Vue項目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包部署的相關(guān)資料,需要的朋友可以參考下2021-09-09
本篇文章主要介紹了vue 文件目錄結(jié)構(gòu)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue.js中使用最多的兩個指令就是v-if和v-for,下面這篇文章主要給大家介紹了關(guān)于Vue3中v-if和v-for優(yōu)先級的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue enter回車導(dǎo)致頁面刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue?element實現(xiàn)權(quán)限管理業(yè)務(wù)流程詳解
目前本人再使用vue-element-admin項目時都是通過直接刪除一些用不上的路由來進行側(cè)邊欄的清除，但是其實有一個更加好的辦法來對項目的側(cè)邊欄顯示的內(nèi)用進行管理，就是權(quán)限管理，其實也不知道這個方法好不好，原理上來說時跟直接刪除該路由的方式時一樣的2022-08-08
下面小編就為大家分享一篇解決vue單頁使用keep-alive頁面返回不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了關(guān)于vue中輸入框的使用場景總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
vue2與vue3中生命周期執(zhí)行順序的區(qū)別說明
這篇文章主要介紹了vue2與vue3中生命周期執(zhí)行順序的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06