UniApp 请求封装：简单易用的 API 接口调用方法

本文将介绍如何在 UniApp 中进行简单的请求封装，方便调用 API 接口。我们将创建一个 request.js 文件，用于封装请求逻辑。

request.js 文件

const baseUrl = 'https://yourapi.com'; // 接口基础路径

const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + url,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json' // 根据实际接口需要设置请求头
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(res);
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

export default request;

使用方法

在需要发送请求的页面引入 request.js 文件并调用 request 方法即可，例如：

import request from '@/utils/request.js';

export default {
  data() {
    return {
      goodsList: []
    };
  },
  mounted() {
    this.getGoodsList();
  },
  methods: {
    async getGoodsList() {
      try {
        const res = await request('/goods/list', 'GET');
        this.goodsList = res.data;
      } catch (err) {
        console.log(err);
      }
    }
  }
};

代码说明

baseUrl： 定义接口基础路径，方便统一管理。
request 函数： 封装了 uni.request 方法，并使用 Promise 对象来处理异步请求，方便使用 async/await 语法进行调用。
async/await： 使用 async/await 处理异步请求，使代码更简洁易读。
错误处理： 使用 try...catch 语句进行错误处理。

总结

通过以上步骤，我们成功地对 UniApp 请求进行了简单的封装，方便后续调用 API 接口。你可以在此基础上进一步完善，例如添加请求拦截器、错误处理机制等。