【前端VUE基础（一）】统一接口管理

原创已于 2023-07-18 20:33:22 修改

· 1.5k 阅读

4 ·

版权

文章标签：

#vue.js #前端 #javascript

于 2023-07-17 12:03:44 首次发布

【前端VUE基础】专栏收录该内容

9 篇文章

订阅专栏

一、统一接口管理好处

统一接口管理指的是将所有的接口请求都集中到一个文件中进行管理，这样可以提高代码的可维护性和可读性，同时也方便了代码的复用和管理。以下是统一接口管理的好处：

（一）提高代码的可维护性

在项目中，可能会有很多个地方需要使用相同的接口请求，如果每个地方都分别定义接口请求的话，那么当接口需要修改或者新增时，就需要在每个地方都进行修改，这样会非常麻烦。而如果将所有的接口请求都集中到一个文件中进行管理，那么当接口需要修改或者新增时，只需要在这个文件中进行修改或者新增即可，这样可以大大提高代码的可维护性。

（二）方便代码的复用

将接口请求集中到一个文件中进行管理，可以方便地在不同的组件或者页面中进行复用，减少了代码的重复编写，提高了代码的复用性。

（三）方便代码的管理

使用统一接口管理的方式，可以将所有的接口请求集中到一个文件中进行管理，方便了代码的管理，避免了接口请求散落在各个组件或者页面中，导致代码难以维护的情况。

（四）方便接口的测试和调试

通过将所有的接口请求集中到一个文件中进行管理，可以方便地进行接口的测试和调试，避免了在各个组件或者页面中进行接口测试的情况，提高了测试和调试的效率。

总结

综上所述，统一接口管理的方式可以提高代码的可维护性和可读性，方便了代码的复用和管理，同时也方便了接口的测试和调试。在实际项目中，统一接口管理是一个非常好的实践方式，可以提高代码的质量和开发效率。

二、案例说明

通常，接口统一管理包括以下几个步骤：

        （1）创建一个 api 目录，用于存放所有的接口请求函数。

        （2）在 api 目录下，创建一个 request.js 文件，用于封装 axios 实例，包括设置一些默认参数和拦截器。

        （3）在 api 目录下，创建一个或多个文件，用于存放不同功能模块的接口请求函数。

        （4）在需要使用接口数据的组件中，引入接口请求函数，并调用它们来获取数据或更新状态。

以下是一个案例对比，分别演示了有和没有进行统一接口管理的情况。

假设有一个 Vue 项目，需要调用两个接口：

获取用户信息接口：/api/user/info
更新用户信息接口：/api/user/update

（一）未进行统一接口管理

在没有进行统一接口管理的情况下，我们可能会在多个组件中分别定义接口请求。例如，在 User.vue 组件中需要获取用户信息和更新用户信息：

<template>
  <div>
    <h1>User Info</h1>
    <p>{{ userInfo }}</p>
    <button @click="updateUserInfo">Update Info</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    axios.get('/api/user/info')
      .then(response => {
        this.userInfo = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
  methods: {
    updateUserInfo() {
      const data = { /* 更新用户信息的数据 */ };
      axios.post('/api/user/update', data)
        .then(response => {
          // 更新成功的处理逻辑
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在另一个组件 Order.vue 中也需要调用更新用户信息的接口：

<template>
  <div>
    <h1>Order Info</h1>
    <button @click="updateUserInfo">Update Info</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    updateUserInfo() {
      const data = { /* 更新用户信息的数据 */ };
      axios.post('/api/user/update', data)
        .then(response => {
          // 更新成功的处理逻辑
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在这种情况下，如果接口需要修改或新增，那么就需要在多个组件中进行修改，这样会非常麻烦，而且容易出错。

（二）进行统一接口管理的情况

在进行统一接口管理的情况下，我们可以将所有的接口请求都集中到一个文件中进行管理，例如在 api.js 文件中：

import axios from 'axios';

const http = axios.create({
  baseURL: '/api',
  timeout: 10000
});

const getUserInfo = () => {
  return http.get('/user/info');
};

const updateUserInfo = (data) => {
  return http.post('/user/update', data);
};

export { getUserInfo, updateUserInfo };

在 User.vue 组件中导入并使用这些接口：

<template>
  <div>
    <h1>User Info</h1>
    <p>{{ userInfo }}</p>
    <button @click="updateUserInfo">Update Info</button>
  </div>
</template>

<script>
import { getUserInfo, updateUserInfo } from '@/api';

export default {
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    getUserInfo()
      .then(response => {
        this.userInfo = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
  methods: {
    updateUserInfo() {
      const data = { /* 更新用户信息的数据 */ };
      updateUserInfo(data)
        .then(response => {
          // 更新成功的处理逻辑
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在 Order.vue 组件中也导入并使用这些接口：

<template>
  <div>
    <h1>Order Info</h1>
    <button @click="updateUserInfo">Update Info</button>
  </div>
</template>

<script>
import { updateUserInfo } from '@/api';

export default {
  methods: {
    updateUserInfo() {
      const data = { /* 更新用户信息的数据 */ };
      updateUserInfo(data)
        .then(response => {
          // 更新成功的处理逻辑
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>