vuejs中封装axios请求集中管理

vuejs中封装axios请求集中管理

前言

vuejs中,使用axios请求数据,一般会封装一个请求方法,然后在每个页面中调用,这样就造成代码冗余,导致代码可读性差,维护困难。

在项目当中,单独使用axios或者在main.js中全局引入axios,然后在每个页面中调用,这样做,不是不可以,但是会使项目的请求非常分散,这样是不易代码维护的,如果一些要求比较高的项目,是需要对请求进行封装的。

我们需要将axios请求集中管理,方便以后维护。

未封装前代码

若没有进行封装,则需要在具体单文件中,单独引入axios,然后进行请求。

如下所示

go 复制代码
<template>
    <div>
          <div>
            <el-button type="primary"  @click="handleBtnGetJoke">请求数据</el-button>
            <el-button type="danger" @click="handleBtnClearData" v-if="aDatas.length > 0?true:false">清空数据</el-button>
    </div>
</template>

<script setup>
// 引入axios    
import axios from "axios";

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
    }
    // 使用axios中的get请求数据
    const response = 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);
    }
}

// 加载数据,叠加
function handleBtnLoading() {
    page.value++;
    handleBtnGetJoke(); 
    //getJokeListsData();
}

// 清空数据
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封装,那么只要项目中的单文件组件,需要请求数据,那么就必须引入axios,而且需要频繁的写axios.get()axios.post()

如果不想重复引入axios,也可以在main.js文件中,进行axios的全局的引入

go 复制代码
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');

那在单文件组件中,就可以直接使用

go 复制代码
<template>
    <div>
          <div>
            <el-button type="primary"  @click="handleBtnGetJoke">请求数据</el-button>
            <el-button type="danger" @click="handleBtnClearData" v-if="aDatas.length > 0?true:false">清空数据</el-button>
    </div>
</template>

<script setup>
// 需要引入getCurrentInstance() 获取当前实例
import { ref,getCurrentInstance  } from "vue";
// 调用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);
    }
}

// 加载数据,叠加
function handleBtnLoading() {
    page.value++;
    handleBtnGetJoke(); 
}

// 清空数据
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了。

但是同样是存在弊端的,这样每次请求数据,都需要把params参数传进去,这样就比较麻烦,所以,我们还可以封装一个get请求方法,把params参数封装到get请求方法中,这样每次请求数据,就不用每次都传params参数了。

封装axios请求数据的方法

1. 封装一个request.js文件,用于请求数据,这个文件中,封装了axios请求数据的方法,以及请求拦截和响应拦截。

封装了getpost请求方法,以及请求拦截和响应拦截。一般会放在src目录下的api文件夹中。

如下示例所示

go 复制代码
import axios from 'axios';
// 接口地止
const baseUrl = '/api/joke/content/list.php';

// get请求方法封装,具体某个页面当中的get请求方法,可以调用这个方法
export const getJokeLists =  (params)=> {
    return  axios.get(`${baseUrl}`,{
        params:{
            ...params
        }
    })
}

2. 在组件中进行使用

在组件中,使用request.js中的方法,进行请求数据。

如下示例所示

go 复制代码
<template>
    <div>
          <div>
            <el-button type="primary"  @click="getJokeListsData">请求数据</el-button>
            <el-button type="danger" @click="handleBtnClearData" v-if="aDatas.length > 0?true:false">清空数据</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() {
    // 请求参数
    const params ={
        key: "aa1b7ad08be2a09a4e0d2d46897e2dc8",
        page: page.value,
        pagesize:pagesize.value,
        time: 1418816972
    }
    // 这里的话,直接调用request.js中的方法,进行请求数据,就可以了的
    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);
    }
}


// 加载数据,叠加
function handleBtnLoading() {
    page.value++;
    getJokeListsData();
}

// 清空数据
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>

你会发现,如果封装了页面的axiosget请求,

那么,我们就可以直接使用get请求了,不需要再写get请求的代码了,直接调用get请求的方法就可以了,是不是很方便呢?

因为我们的get请求,在request.js中已经封装好了,所以,我们直接调用就可以了.封装post也是类似的

但凡一些写得比较规范的项目里,都是会对axios进行封装的,这样便于代码的管理和复用,也便于项目的维护

封装有封装的好处,不封装,也有不封装的好处,对于初学者,写零散的axios请求,比较直接,而封装后的代码,需要开发者自己去追溯

封装的代码,对于初学者,可能比较难以理解,所以,对于初学者,建议先写零散的代码,等够熟练了,然后再进行封装,在自己不是很熟练的时候,先写零散的代码,这样,对封装,有一个比较直观的理解

而不要一上来就封装请求代码的,给自己挖坑的,确定零散的代码没有问题,再封装,这样,对初学者,比较友好

<>

vuejs中缓存组件状态-keepAlive
<>

2023-09-30

<>

前后端联调前-一个前端动手写代码前的思考
<>

2023-09-21

<>

vite构建的本地开发环境请求第三方接口时如何解决跨域问题
<>

2023-09-17

<>

VuePress网站如何使用axios请求第三方接口
<>

2023-09-16

<>

通过分享缩短链接进行赚钱
<>

2023-09-15

相关推荐
旧林8435 分钟前
第八章 利用CSS制作导航菜单
前端·css
程序媛-徐师姐16 分钟前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq17 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm2 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j