UniApp发送请求,封装成更为方便使用的Promise

在 UniApp 发送请求通常使用的是自带的uni.request()来发送，即如下

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

但是这么使用的话，代码量一多就会发现出现了大量的重复代码，变得尤为繁琐，并且没有使用 Promise 来的方便，这时我们就会想到封装 uni.request()。
而在 UniApp 中封装 uni.request 使用 Promise，可以帮助你更方便地处理异步请求。以下是一个具体的封装示例，以及如何在项目中使用它：

1. 封装 uni.request 为 Promise

首先新建一个utils文件夹，你可以将 uni.request 封装成一个通用的请求方法，使得所有的请求都可以通过 Promise 来处理。这样可以使用 then 和 catch 方法来处理请求的成功和失败。

// 封装 uni.request 方法  utils/request.js文件
function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: options.url, // 请求的地址
      method: options.method || 'GET', // 默认是 GET 方法
      data: options.data || {}, // 请求的数据
      header: options.header || {}, // 请求头部信息
      success: (res) => {
        // 根据需要，判断状态码来确定成功还是失败
        if (res.statusCode === 200) {
          resolve(res.data); // 返回数据
        } else {
          reject(res); // 返回错误信息
        }
      },
      fail: (err) => {
        reject(err); // 请求失败时返回错误
      }
    });
  });
}

2. 使用封装后的请求方法

封装好后，你可以像下面这样使用 request 函数：
⚠️ 同时你也可以新建一个 api 文件夹，对接口进行模块化管理

// 发起 GET 请求
request({
  url: 'https://example.com/api/getData',
  method: 'GET'
}).then(res => {
  console.log('请求成功：', res);
}).catch(err => {
  console.error('请求失败：', err);
});

// 发起 POST 请求
request({
  url: 'https://example.com/api/postData',
  method: 'POST',
  data: {
    username: 'user',
    password: 'pass'
  },
  header: {
    'content-type': 'application/x-www-form-urlencoded'
  }
}).then(res => {
  console.log('POST 请求成功：', res);
}).catch(err => {
  console.error('POST 请求失败：', err);
});

3. 进一步优化封装

你可以进一步优化封装，比如添加默认的请求头、请求超时、错误处理等。

// 更加通用的封装
function request(options) {
  const defaultHeaders = {
    'content-type': 'application/json' // 设置默认头部信息
  };

  return new Promise((resolve, reject) => {
    uni.request({
      url: options.url, 
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        ...defaultHeaders, 
        ...options.header // 合并用户传递的头部信息
      },
      timeout: options.timeout || 5000, // 请求超时时间，默认5秒
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject({
            msg: '请求出错',
            statusCode: res.statusCode,
            response: res
          });
        }
      },
      fail: (err) => {
        reject({
          msg: '请求失败',
          error: err
        });
      }
    });
  });
}

4. 使用优化后的封装

// GET 请求
request({
  url: 'https://example.com/api/data',
  method: 'GET'
}).then(res => {
  console.log('成功：', res);
}).catch(err => {
  console.error('错误：', err.msg, '状态码：', err.statusCode);
});

// POST 请求
request({
  url: 'https://example.com/api/post',
  method: 'POST',
  data: { key: 'value' },
  timeout: 10000 // 自定义超时时间
}).then(res => {
  console.log('POST 成功：', res);
}).catch(err => {
  console.error('POST 错误：', err.msg, err.error);
});

通过这种封装方式，你的代码会更加简洁且易于维护。你可以在整个项目中复用这个 request 函数。