​

 大家好~ 我是前端uio，本文主要介绍 uniApp 网络请求封装实践。有什么疑问都欢迎私聊或者在评论区留言。如果需要开发 web 网页或者微信小程序都可以找我私聊，我会尽可能回答我了解的内容。

---

一、基本介绍

       uniApp 请求封装是指在 uniApp 开发中，为了简化网络请求的编写和管理，将网络请求的逻辑抽象成一个独立的模块，通过这个模块统一处理所有的网络请求。

二、uniApp请求封装的步骤

1.创建请求封装文件

        在项目中创建一个专门用于请求封装的文件，通常命名为 request.js，并将其放置在合适的目录中。

2.定义请求方法

        在 request.js 文件中，定义各种HTTP请求方法，如GET、POST、PUT、DELETE 等，每个方法接收相应的参数，并返回一个 Promise 对象。

3.配置请求参数

        在请求方法中，配置请求的URL、方法、数据、头部信息等参数。可以根据需要添加额外的配置，如加载提示、错误处理等。

4.封装请求逻辑

        使用 uni.request  API发起网络请求，并在请求成功或失败时，分别解析响应数据或错误信息，然后解决或拒绝Promise。

5.全局引入请求封装

        在主入口文件 main.js 中全局引入请求封装模块，并将其挂载到 Vue 原型上，以便在任何页面或组件中都能方便地调用。

6.页面调用请求封装

        在页面的 JavaScript 部分，导入请求封装模块，并调用相应的请求方法，传递必要的参数，处理返回的数据。

三、主要代码 

1.封装文件request.js

// request.js
const baseUrl = 'https://api.hutao.com'; // 设置基础URL

function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + options.url, // 拼接完整的URL
      method: options.method || 'GET', // 默认请求方法是GET
      data: options.data || {}, // 默认数据为空对象
      header: options.header || { 'Content-Type': 'application/json' }, // 默认头部信息
      success: (res) => {
        // 请求成功
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data); // 成功则返回数据
        } else {
          reject(new Error('请求失败，状态码：' + res.statusCode)); // 否则返回错误信息
        }
      },
      fail: (err) => {
        // 请求失败
        reject(err); // 返回错误信息
      },
      complete: () => {
        // 请求完成，无论成功与否都会执行
        // 可以在这里做一些清理工作，比如隐藏加载提示等
      },
    });
  });
}

// 导出一个对象，包含常用的请求方法
export default {
  get(url, data) {
    return request({ url, method: 'GET', data });
  },
  post(url, data) {
    return request({ url, method: 'POST', data });
  },
  put(url, data) {
    return request({ url, method: 'PUT', data });
  },
  delete(url, data) {
    return request({ url, method: 'DELETE', data });
  },
};

2.页面调用

// pages/onePage.vue
<script>
import request from '@/utils/request.js'; // 引入封装的请求模块

export default {
  methods: {
    fetchData() {
      request.get('/someEndpoint')
        .then((data) => {
          console.log(data);
          // 处理返回的数据
        })
        .catch((error) => {
          console.error(error);
          // 处理错误
        });
    },
    submitForm() {
      const formData = { /* 表单数据 */ };
      request.post('/submitEndpoint', formData)
        .then((data) => {
          console.log(data);
          // 处理提交后的数据
        })
        .catch((error) => {
          console.error(error);
          // 处理提交错误
        });
    },
  },
};
</script>

四、总结与思考

1.封装价值：提升代码复用，减少重复工作，增强代码一致性。

2.迭代优化：持续响应需求变化，通过反馈改进，确保网络请求的高效稳定。

3.中心化管理：统一错误处理，便于监控和调试，提高开发维护效率。

4.使用 uniApp 根据具体需求添加更多的功能，如请求超时、重试机制、请求拦截器等。

​