• vuejs中封装axios请求集中管理


    15ff9081f789b1dfa0cabf8a2f1def94.jpeg

    vuejs中封装axios请求集中管理

    前言

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

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

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

    未封装前代码

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

    如下所示

    1. // 引入axios    
    2. import axios from "axios";
    3. let aDatas = ref([]);
    4. let page = ref(1);
    5. let pagesize = ref(5);
    6. // 请求数据
    7. async function handleBtnGetJoke() {
    8.     const params = {
    9.         key: 'aa1b7ad08be2a09a4e0d2d46897e2dc8',
    10.         page: page.value,
    11.         pagesize:pagesize.value,
    12.         time: 1418816972
    13.     }
    14.     // 使用axios中的get请求数据
    15.     const response = await axios.get('/api/joke/content/text.php',{params})
    16.     console.log(response);
    17.     if(response.status == 200) {
    18.         const { data } = response.data.result;
    19.         console.log(data);
    20.         aDatas.value = aDatas.value.concat(data);
    21.     }
    22. }
    23. // 加载数据,叠加
    24. function handleBtnLoading() {
    25.     page.value++;
    26.     handleBtnGetJoke(); 
    27.     //getJokeListsData();
    28. }
    29. // 清空数据
    30. function handleBtnClearData() {
    31.     aDatas.value = [];
    32. }
    33. .joke-list {
    34.     list-style-type: decimal;
    35.     list-style-position: outside;
    36.     padding: 5px 0;
    37.     border-bottom: dashed 1px #ccc;
    38. }
    39. .loading {
    40.     margin: 0 auto;
    41.     text-align:center;
    42. }

    如果没有进行axios封装,那么只要项目中的单文件组件,需要请求数据,那么就必须引入axios,而且需要频繁的写axios.get()axios.post()

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

    1. import { createApp } from 'vue';
    2. import axios from "axios";
    3. import ElementPlus from 'element-plus';
    4. //import 'element-plus/lib/theme-chalk/index.css';   
    5. import 'element-plus/dist/index.css';
    6. import App from './App.vue';
    7. const app = createApp(App);
    8. // 全局 挂载axios,在vue2.0里面是挂载在原型下的vue.prototype.$axios = axios,写过vue2.0的代码的应该不会陌生
    9. app.config.globalProperties.$axios = axios
    10. app.use(ElementPlus)
    11. app.mount('#app');

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

    1. // 需要引入getCurrentInstance() 获取当前实例
    2. import { ref,getCurrentInstance  } from "vue";
    3. // 调用getCurrentInstance() 获取axios实例
    4. const { proxy } = getCurrentInstance();
    5. let aDatas = ref([]);
    6. let page = ref(1);
    7. let pagesize = ref(5);
    8. async function handleBtnGetJoke() {
    9.     const params = {
    10.         key: 'aa1b7ad08be2a09a4e0d2d46897e2dc8',
    11.         page: page.value,
    12.         pagesize:pagesize.value,
    13.         time: 1418816972
    14.     }
    15.     // 需要proxy.$axios.get() 这样才能使用
    16.     const response = await proxy.$axios.get('/api/joke/content/text.php',{params})
    17.     console.log(response);
    18.     if(response.status == 200) {
    19.         
    20.         const { data } = response.data.result;
    21.         console.log(data);
    22.         aDatas.value = aDatas.value.concat(data);
    23.     }
    24. }
    25. // 加载数据,叠加
    26. function handleBtnLoading() {
    27.     page.value++;
    28.     handleBtnGetJoke(); 
    29. }
    30. // 清空数据
    31. function handleBtnClearData() {
    32.     aDatas.value = [];
    33. }
    34. .joke-list {
    35.     list-style-type: decimal;
    36.     list-style-position: outside;
    37.     padding: 5px 0;
    38.     border-bottom: dashed 1px #ccc;
    39. }
    40. .loading {
    41.     margin: 0 auto;
    42.     text-align:center;
    43. }

    类型上面的代码,把axios全局挂载在proxy上,然后就可以在vue文件中直接使用proxy.$axios.get()了,这样单文件组件中,就不用每次都引入axios了。

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

    封装axios请求数据的方法

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

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

    如下示例所示

    1. import axios from 'axios';
    2. // 接口地止
    3. const baseUrl = '/api/joke/content/list.php';
    4. // get请求方法封装,具体某个页面当中的get请求方法,可以调用这个方法
    5. export const getJokeLists =  (params)=> {
    6.     return  axios.get(`${baseUrl}`,{
    7.         params:{
    8.             ...params
    9.         }
    10.     })
    11. }

    2. 在组件中进行使用

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

    如下示例所示

    1. import { getJokeLists } from "../../api/request.js";
    2. let aDatas = ref([]);
    3. let page = ref(1);
    4. let pagesize = ref(5);
    5. async function getJokeListsData() {
    6.     // 请求参数
    7.     const params ={
    8.         key: "aa1b7ad08be2a09a4e0d2d46897e2dc8",
    9.         page: page.value,
    10.         pagesize:pagesize.value,
    11.         time: 1418816972
    12.     }
    13.     // 这里的话,直接调用request.js中的方法,进行请求数据,就可以了的
    14.     const response = await getJokeLists(params)
    15.     console.log(response);
    16.     if(response.status == 200) {
    17.         
    18.         const { data } = response.data.result;
    19.         console.log(data);
    20.         aDatas.value = aDatas.value.concat(data);
    21.     }
    22. }
    23. // 加载数据,叠加
    24. function handleBtnLoading() {
    25.     page.value++;
    26.     getJokeListsData();
    27. }
    28. // 清空数据
    29. function handleBtnClearData() {
    30.     aDatas.value = [];
    31. }
    32. .joke-list {
    33.     list-style-type: decimal;
    34.     list-style-position: outside;
    35.     padding: 5px 0;
    36.     border-bottom: dashed 1px #ccc;
    37. }
    38. .loading {
    39.     margin: 0 auto;
    40.     text-align:center;
    41. }

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

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

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

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

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

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

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

    vuejs中缓存组件状态-keepAlive

    2023-09-30

    d50f346963c6992e77553b6b7a921463.jpeg

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

    2023-09-21

    c3d2a128f5031691d34a19efe1b14079.jpeg

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

    2023-09-17

    fe05befe75c6f7e2be2c204b12c4c281.jpeg

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

    2023-09-16

    ae6b56a0cd86e40f25d6fb70d4fbb121.jpeg

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

    2023-09-15

    8c93be4930b76b7d727fa93a80545572.jpeg
  • 相关阅读:
    什么是防火墙以及如何工作
    [附源码]计算机毕业设计JAVA高校新生报到管理系统
    分析师:百度到2030年可能成为中国市值最高的公司
    asp.net core mvc 控制器使用配置
    linux音频-IIS音频接口
    clickhouse 参数优化配置
    520. 检测大写字母
    computer architecture simulator汇总
    R-GIS: 如何用R语言实现GIS地理空间分析及模型预测
    车载高速CAN(HighSpeed CAN)通信之CAN Bus Off
  • 原文地址:https://blog.csdn.net/wzc_coder/article/details/133565034