个人技术总结——vue框架下的接口分装

2024-06-06 22:39:55 474 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

vue搭建简易前端前文初步了解了组件库Element Plus，现在正式开始使用vue搭建大事件前端页面，后端见（springboot以及后续项目专栏）阅读详情

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	个人技术总结
其他参考文献	CSDN

首先，安装Axios依赖，创建Axios实例，配置基础URL、超时设置等。通过使用Axios的拦截器，我们可以在请求发送前后或响应返回前后进行统一处理，如添加认证信息、处理错误等。接下来，创建API服务模块，将接口请求逻辑封装在单独的文件中。例如，为用户管理创建user.js，定义getUser等方法，每个方法返回一个Axios请求的Promise。这样，组件可以直接导入并使用这些API方法，无需关心请求细节。最后，在Vue组件中，通过导入API服务模块，可以在数据获取、事件处理等生命周期钩子中调用封装的接口请求，处理数据并更新视图。使用async/await语法可以使异步代码更加清晰易读。

2.1 封装步骤

2.1.1. 创建request.js

在主目录下创建utils文件夹，并在其中新建request.js文件用于封装请求。
request.js代码如下：

import axios from "axios";
// 创建axios
const request = axios.create({
    baseURL: 'http://服务器地址/...',
    timeout: 15000,   // 超时
});

//添加请求拦截器
request.interceptors.request.use(
    function (config) {
        config.headers['Access-Control-Allow-Origin'] = '*';
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);
//添加响应拦截器
request.interceptors.response.use(
    function (response) {
        //返回响应数据；
        const data = response;
        if (data) {
            return Promise.resolve(data.data);
        }
        return response;
    },
    function (error) {
        //返回响应错误
        return Promise.reject(error);
    }
);
export default request;

2.1.2.配置api文件

在主目录下创建api文件夹，在其中新建api.js接口文件。
api.js代码如下：

import request from '../utils/request'
import qs from 'qs';

export function login(data) {
    return request.request({
        method: "post",
        url: `/login`,
        headers: { 'content-type': 'application/x-www-form-urlencoded' },
        data: qs.stringify(data),
    })
}

2.1.3.在组件中使用

在Vue组件中，导入API文件并使用封装的接口
以调用登录接口为例，login.vue代码如下：

<script>
import { login } from '@/api/api';
export default {
  methods: {
    userLogin() {
      login(this.loginForm).then((res) => {
        console.log(this.loginForm)
        if (res.code == 200) {
          //登录成功后的操作
        } else {
          alert('管理员编号或密码错误！');
          return false;
        }
      });
    }
  }
}
</script>

2.2 封装的好处

解耦：将API请求逻辑与业务逻辑分离，降低组件复杂度。
复用：统一的请求处理可以在多个组件或服务中复用。
维护：集中管理API请求，便于后续的修改和维护。
扩展：方便添加新的功能，如统一的错误处理、日志记录等。

三、遇到的问题和解决过程

3.1 请求超时问题

问题描述: 请求服务器时间太长，超过设置的超时时间。
解决过程:

调整axios实例的timeout设置，增加超时时间。
优化服务器性能或网络条件。

3.2 请求头设置问题

问题描述: 服务器要求特定的请求头格式，如Content-Type。
解决过程:

在发送请求时，根据需要设置正确的请求头。例如，在api.js中设置headers: { 'content-type': 'application/x-www-form-urlencoded' }。

3.3 响应数据处理问题

问题描述: 服务器返回的数据格式不一致或需要进行额外处理。
解决过程:

在响应拦截器中统一处理响应数据，例如检查状态码或统一错误提示。

四、总结

通过软件工程实践，我逐步掌握了在Vue中使用Axios进行接口封装的方法。封装接口不仅可以提高开发效率，还可以使代码更加模块化和易于维护。当然，在封装过程中可能遇到各种问题，通过查阅相关资料，找出相应的解决策略，就像打怪通关一样，我在解决问题的过程中积累开发的经验，提升自身的开发能力。在今后的学习和开发中，希望我能保持好学之心，不断学习，不断进步。

...全文