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

相关推荐
涵信2 分钟前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
codingandsleeping27 分钟前
Express入门
javascript·后端·node.js
Vaclee30 分钟前
JavaScript-基础语法
开发语言·javascript·ecmascript
拉不动的猪1 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程1 小时前
ES练习册
java·前端·elasticsearch
Asthenia04121 小时前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
Mr.app2 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code3 小时前
美团社招一面
前端·javascript·vue.js