Uniapp 网络请求封装的实现方法

在 Uniapp 开发中，网络请求是与服务器进行数据交互的关键环节。合理地封装网络请求，能够极大提高代码的可维护性与复用性。

明确网络请求封装的目的。通过封装，可以将网络请求的逻辑集中管理，避免在各个页面中重复编写相似代码。便于统一处理请求的loading状态、错误提示等操作。

创建一个专门的网络请求封装文件，例如 http.js。在这个文件中，引入 Uniapp 内置的 uni.request 方法。uni.request 是 Uniapp 进行网络请求的核心方法，它提供了简单易用的接口来发起 HTTP 请求。

在封装函数中，定义请求的基本配置。比如，设置请求的基地址 baseUrl，这样在调用封装函数时，只需传入相对路径即可。示例代码如下：

const baseUrl = 'https://example.com/api';
function httpRequest(options) {
  const { url, method = 'GET', data = {} } = options;
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + url,
      method,
      data,
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}
export default httpRequest;

上述代码中，httpRequest 函数接收一个 options 对象，从中提取请求的 url、method 和 data。通过 Promise 来处理请求的结果，成功时将数据 resolve 出去，失败时将错误 reject 出去。

在页面中使用封装的网络请求也很简单。先引入封装的函数，然后调用该函数并传入请求的参数。例如：

import httpRequest from '@/utils/http.js';
export default {
  methods: {
    async getData() {
      try {
        const result = await httpRequest({
          url: '/data',
          method: 'GET'
        });
        console.log(result);
      } catch (error) {
        console.error(error);
      }
    }
  }
};

在 getData 方法中，使用 await 来等待网络请求的结果，使得代码看起来更像是同步执行。如果请求成功，result 将包含服务器返回的数据；如果失败，catch 块将捕获到错误信息。

通过这样的方式，实现了 Uniapp 网络请求的封装，让代码结构更加清晰，开发效率得到显著提升。