詳解如何在vue中封裝axios請(qǐng)求并集中管理
前言
在vuejs中，使用axios請(qǐng)求數(shù)據(jù)，一般會(huì)封裝一個(gè)請(qǐng)求方法，然后在每個(gè)頁面中調(diào)用，這樣就造成代碼冗余，導(dǎo)致代碼可讀性差，維護(hù)困難。
在項(xiàng)目當(dāng)中,單獨(dú)使用axios或者在main.js中全局引入axios，然后在每個(gè)頁面中調(diào)用，這樣做,不是不可以,但是會(huì)使項(xiàng)目的請(qǐng)求非常分散,這樣是不易代碼維護(hù)的,如果一些要求比較高的項(xiàng)目,是需要對(duì)請(qǐng)求進(jìn)行封裝的。
我們需要將axios請(qǐng)求集中管理，方便以后維護(hù)。
未封裝前代碼
若沒有進(jìn)行封裝,則需要在具體單文件中，單獨(dú)引入axios，然后進(jìn)行請(qǐng)求。
如下所示
<template>
<div>
<div>
<el-button type="primary" @click="handleBtnGetJoke">請(qǐng)求數(shù)據(jù)</el-button>
<el-button type="danger" @click="handleBtnClearData" v-if="aDatas.length > 0?true:false">清空數(shù)據(jù)</el-button>
</div>
</template>
<script setup>
// 引入axios
import axios from "axios";
let aDatas = ref([]);
let page = ref(1);
let pagesize = ref(5);
// 請(qǐng)求數(shù)據(jù)
async function handleBtnGetJoke() {
const params = {
key: 'aa1b7ad08be2a09a4e0d2d46897e2dc8',
page: page.value,
pagesize:pagesize.value,
time: 1418816972
}
// 使用axios中的get請(qǐng)求數(shù)據(jù)
const response = await await axios.get('/api/joke/content/text.php',{params})
console.log(response);
if(response.status == 200) {
const { data } = response.data.result;
console.log(data);
aDatas.value = aDatas.value.concat(data);
}
}
// 加載數(shù)據(jù),疊加
function handleBtnLoading() {
page.value++;
handleBtnGetJoke();
//getJokeListsData();
}
// 清空數(shù)據(jù)
function handleBtnClearData() {
aDatas.value = [];
}
</script>
<style scoped>
.joke-list {
list-style-type: decimal;
list-style-position: outside;
padding: 5px 0;
border-bottom: dashed 1px #ccc;
}
.loading {
margin: 0 auto;
text-align:center;
}
</style>
如果沒有進(jìn)行axios封裝,那么只要項(xiàng)目中的單文件組件,需要請(qǐng)求數(shù)據(jù)，那么就必須引入axios,而且需要頻繁的寫axios.get()或axios.post()
如果不想重復(fù)引入axios,也可以在main.js文件中，進(jìn)行axios的全局的引入
import { createApp } from 'vue';
import axios from "axios";
import ElementPlus from 'element-plus';
//import 'element-plus/lib/theme-chalk/index.css';
import 'element-plus/dist/index.css';
import App from './App.vue';
const app = createApp(App);
// 全局 掛載axios,在vue2.0里面是掛載在原型下的vue.prototype.$axios = axios,寫過vue2.0的代碼的應(yīng)該不會(huì)陌生
app.config.globalProperties.$axios = axios
app.use(ElementPlus)
app.mount('#app');
那在單文件組件中，就可以直接使用
<template>
<div>
<div>
<el-button type="primary" @click="handleBtnGetJoke">請(qǐng)求數(shù)據(jù)</el-button>
<el-button type="danger" @click="handleBtnClearData" v-if="aDatas.length > 0?true:false">清空數(shù)據(jù)</el-button>
</div>
</template>
<script setup>
// 需要引入getCurrentInstance() 獲取當(dāng)前實(shí)例
import { ref,getCurrentInstance } from "vue";
// 調(diào)用getCurrentInstance() 獲取axios實(shí)例
const { proxy } = getCurrentInstance();
let aDatas = ref([]);
let page = ref(1);
let pagesize = ref(5);
async function handleBtnGetJoke() {
const params = {
key: 'aa1b7ad08be2a09a4e0d2d46897e2dc8',
page: page.value,
pagesize:pagesize.value,
time: 1418816972
}
// 需要proxy.$axios.get() 這樣才能使用
const response = await proxy.$axios.get('/api/joke/content/text.php',{params})
console.log(response);
if(response.status == 200) {
const { data } = response.data.result;
console.log(data);
aDatas.value = aDatas.value.concat(data);
}
}
// 加載數(shù)據(jù),疊加
function handleBtnLoading() {
page.value++;
handleBtnGetJoke();
}
// 清空數(shù)據(jù)
function handleBtnClearData() {
aDatas.value = [];
}
</script>
<style scoped>
.joke-list {
list-style-type: decimal;
list-style-position: outside;
padding: 5px 0;
border-bottom: dashed 1px #ccc;
}
.loading {
margin: 0 auto;
text-align:center;
}
</style>
類型上面的代碼,把axios全局掛載在proxy上，然后就可以在vue文件中直接使用proxy.$axios.get()了,這樣單文件組件中，就不用每次都引入axios了。
但是同樣是存在弊端的,這樣每次請(qǐng)求數(shù)據(jù)，都需要把params參數(shù)傳進(jìn)去，這樣就比較麻煩，所以，我們還可以封裝一個(gè)get請(qǐng)求方法，把params參數(shù)封裝到get請(qǐng)求方法中，這樣每次請(qǐng)求數(shù)據(jù)，就不用每次都傳params參數(shù)了。
封裝axios請(qǐng)求數(shù)據(jù)的方法
1. 封裝一個(gè)request.js文件，用于請(qǐng)求數(shù)據(jù),這個(gè)文件中，封裝了axios請(qǐng)求數(shù)據(jù)的方法，以及請(qǐng)求攔截和響應(yīng)攔截。
封裝了get和post請(qǐng)求方法，以及請(qǐng)求攔截和響應(yīng)攔截。一般會(huì)放在src目錄下的api文件夾中。
如下示例所示
import axios from 'axios';
// 接口地止
const baseUrl = '/api/joke/content/list.php';
// get請(qǐng)求方法封裝,具體某個(gè)頁面當(dāng)中的get請(qǐng)求方法，可以調(diào)用這個(gè)方法
export const getJokeLists = (params)=> {
return axios.get(`${baseUrl}`,{
params:{
...params
}
})
}
2. 在組件中進(jìn)行使用
在組件中，使用request.js中的方法，進(jìn)行請(qǐng)求數(shù)據(jù)。
如下示例所示
<template>
<div>
<div>
<el-button type="primary" @click="getJokeListsData">請(qǐng)求數(shù)據(jù)</el-button>
<el-button type="danger" @click="handleBtnClearData" v-if="aDatas.length > 0?true:false">清空數(shù)據(jù)</el-button>
<div>
<ul v-if="aDatas.length > 0?true:false">
<li class="joke-list" v-for="item in aDatas"
:key="item.hashId">{{ item.content }}
</li>
<div class="loading" v-if="aDatas.length > 0?true:false">
<el-button size="mini" type="primary" @click="handleBtnLoading" >加載</el-button>
</div>
</ul>
</div>
</template>
<script setup>
import { getJokeLists } from "../../api/request.js";
let aDatas = ref([]);
let page = ref(1);
let pagesize = ref(5);
async function getJokeListsData() {
// 請(qǐng)求參數(shù)
const params ={
key: "aa1b7ad08be2a09a4e0d2d46897e2dc8",
page: page.value,
pagesize:pagesize.value,
time: 1418816972
}
// 這里的話,直接調(diào)用request.js中的方法，進(jìn)行請(qǐng)求數(shù)據(jù),就可以了的
const response = await getJokeLists(params)
console.log(response);
if(response.status == 200) {
const { data } = response.data.result;
console.log(data);
aDatas.value = aDatas.value.concat(data);
}
}
// 加載數(shù)據(jù),疊加
function handleBtnLoading() {
page.value++;
getJokeListsData();
}
// 清空數(shù)據(jù)
function handleBtnClearData() {
aDatas.value = [];
}
</script>
<style scoped>
.joke-list {
list-style-type: decimal;
list-style-position: outside;
padding: 5px 0;
border-bottom: dashed 1px #ccc;
}
.loading {
margin: 0 auto;
text-align:center;
}
</style>你會(huì)發(fā)現(xiàn),如果封裝了頁面的axios的get請(qǐng)求,
那么,我們就可以直接使用get請(qǐng)求了,不需要再寫get請(qǐng)求的代碼了,直接調(diào)用get請(qǐng)求的方法就可以了,是不是很方便呢?
因?yàn)槲覀兊?code>get請(qǐng)求,在request.js中已經(jīng)封裝好了,所以,我們直接調(diào)用就可以了.封裝post也是類似的
但凡一些寫得比較規(guī)范的項(xiàng)目里,都是會(huì)對(duì)axios進(jìn)行封裝的,這樣便于代碼的管理和復(fù)用,也便于項(xiàng)目的維護(hù)
封裝有封裝的好處,不封裝,也有不封裝的好處,對(duì)于初學(xué)者,寫零散的axios請(qǐng)求,比較直接,而封裝后的代碼,需要開發(fā)者自己去追溯
封裝的代碼,對(duì)于初學(xué)者,可能比較難以理解,所以,對(duì)于初學(xué)者,建議先寫零散的代碼,等夠熟練了,然后再進(jìn)行封裝,在自己不是很熟練的時(shí)候,先寫零散的代碼,這樣,對(duì)封裝,有一個(gè)比較直觀的理解
而不要一上來就封裝請(qǐng)求代碼的,給自己挖坑的,確定零散的代碼沒有問題,再封裝,這樣,對(duì)初學(xué)者,比較友好
到此這篇關(guān)于詳解如何在vue中封裝axios請(qǐng)求并集中管理的文章就介紹到這了,更多相關(guān)vue封裝axios請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
vue watch監(jiān)聽對(duì)象及對(duì)應(yīng)值的變化詳解
下面小編就為大家分享一篇vue watch監(jiān)聽對(duì)象及對(duì)應(yīng)值的變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了講解vue-router之什么是嵌套路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue-cli3.0 腳手架搭建項(xiàng)目的過程詳解
這篇文章主要介紹了vue-cli3.0 腳手架搭建項(xiàng)目的過程，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
uniapp模仿微信實(shí)現(xiàn)聊天界面的示例代碼
這篇文章主要介紹了如何利用uniapp模仿微信，實(shí)現(xiàn)一個(gè)聊天界面。文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
Vue后臺(tái)實(shí)現(xiàn)點(diǎn)擊圖片放大功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)點(diǎn)擊圖片放大功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2022-12-12
這篇文章主要為大家介紹了Vite使用Esbuild提升性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作
這篇文章主要介紹了vue頁面跳轉(zhuǎn)實(shí)現(xiàn)頁面緩存操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue3實(shí)現(xiàn)點(diǎn)擊按鈕實(shí)現(xiàn)文字變色功能
這篇文章主要介紹了使用Vue3實(shí)現(xiàn)點(diǎn)擊按鈕實(shí)現(xiàn)文字變色功能,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
ElementPlus組件與圖標(biāo)按需自動(dòng)引入的實(shí)現(xiàn)方法
這篇文章主要介紹了ElementPlus組件與圖標(biāo)按需自動(dòng)引入的實(shí)現(xiàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06