詳解如何在vue中封裝axios請求并集中管理

更新時間：2023年10月20日 08:50:23 作者：itclanCoder

這篇文章主要為大家詳細介紹了如何在vue中封裝axios請求并集中管理,w文中的示例代碼講解詳細,具有一定的參考價值,有需要的小伙伴可以了解下

前言

在vuejs中，使用axios請求數(shù)據(jù)，一般會封裝一個請求方法，然后在每個頁面中調(diào)用，這樣就造成代碼冗余，導致代碼可讀性差，維護困難。

在項目當中,單獨使用axios或者在main.js中全局引入axios，然后在每個頁面中調(diào)用，這樣做,不是不可以,但是會使項目的請求非常分散,這樣是不易代碼維護的,如果一些要求比較高的項目,是需要對請求進行封裝的。

我們需要將axios請求集中管理，方便以后維護。

未封裝前代碼

若沒有進行封裝,則需要在具體單文件中，單獨引入axios，然后進行請求。

如下所示

<template>
    <div>
          <div>
            <el-button type="primary"  @click="handleBtnGetJoke">請求數(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);

// 請求數(shù)據(jù)
async function handleBtnGetJoke() {
    const params = {
        key: 'aa1b7ad08be2a09a4e0d2d46897e2dc8',
        page: page.value,
        pagesize:pagesize.value,
        time: 1418816972
    }
    // 使用axios中的get請求數(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>

如果沒有進行axios封裝,那么只要項目中的單文件組件,需要請求數(shù)據(jù)，那么就必須引入axios,而且需要頻繁的寫axios.get()或axios.post()

如果不想重復引入axios,也可以在main.js文件中，進行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的代碼的應該不會陌生
app.config.globalProperties.$axios = axios

app.use(ElementPlus)

app.mount('#app');

那在單文件組件中，就可以直接使用

<template>
    <div>
          <div>
            <el-button type="primary"  @click="handleBtnGetJoke">請求數(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() 獲取當前實例
import { ref,getCurrentInstance  } from "vue";
// 調(diào)用getCurrentInstance() 獲取axios實例
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了。

但是同樣是存在弊端的,這樣每次請求數(shù)據(jù)，都需要把params參數(shù)傳進去，這樣就比較麻煩，所以，我們還可以封裝一個get請求方法，把params參數(shù)封裝到get請求方法中，這樣每次請求數(shù)據(jù)，就不用每次都傳params參數(shù)了。

封裝axios請求數(shù)據(jù)的方法

1. 封裝一個request.js文件，用于請求數(shù)據(jù),這個文件中，封裝了axios請求數(shù)據(jù)的方法，以及請求攔截和響應攔截。

封裝了get和post請求方法，以及請求攔截和響應攔截。一般會放在src目錄下的api文件夾中。

如下示例所示

import axios from 'axios';
// 接口地止
const baseUrl = '/api/joke/content/list.php';

// get請求方法封裝,具體某個頁面當中的get請求方法，可以調(diào)用這個方法
export const getJokeLists =  (params)=> {
    return  axios.get(`${baseUrl}`,{
        params:{
            ...params
        }
    })
}

2. 在組件中進行使用

在組件中，使用request.js中的方法，進行請求數(shù)據(jù)。

如下示例所示

<template>
    <div>
          <div>
            <el-button type="primary"  @click="getJokeListsData">請求數(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() {
    // 請求參數(shù)
    const params ={
        key: "aa1b7ad08be2a09a4e0d2d46897e2dc8",
        page: page.value,
        pagesize:pagesize.value,
        time: 1418816972
    }
    // 這里的話,直接調(diào)用request.js中的方法，進行請求數(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>

你會發(fā)現(xiàn),如果封裝了頁面的axios的get請求,

那么,我們就可以直接使用get請求了,不需要再寫get請求的代碼了,直接調(diào)用get請求的方法就可以了,是不是很方便呢?

因為我們的get請求,在request.js中已經(jīng)封裝好了,所以,我們直接調(diào)用就可以了.封裝post也是類似的

但凡一些寫得比較規(guī)范的項目里,都是會對axios進行封裝的,這樣便于代碼的管理和復用,也便于項目的維護

封裝有封裝的好處,不封裝,也有不封裝的好處,對于初學者,寫零散的axios請求,比較直接,而封裝后的代碼,需要開發(fā)者自己去追溯

封裝的代碼,對于初學者,可能比較難以理解,所以,對于初學者,建議先寫零散的代碼,等夠熟練了,然后再進行封裝,在自己不是很熟練的時候,先寫零散的代碼,這樣,對封裝,有一個比較直觀的理解

而不要一上來就封裝請求代碼的,給自己挖坑的,確定零散的代碼沒有問題,再封裝,這樣,對初學者,比較友好

到此這篇關于詳解如何在vue中封裝axios請求并集中管理的文章就介紹到這了,更多相關vue封裝axios請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: