uniapp跨平台应用的请求封装

2024-01-22 20:36:34

前言

在uniapp开发中，经常需要发送网络请求来获取数据或提交数据。如果每次都手动编写请求代码，会很繁琐且容易出错。因此，我们可以对请求代码进行封装，以便在需要的时候直接调用封装好的函数即可。

封装方法

1. 创建一个请求函数

首先，我们需要创建一个请求函数，这个函数将负责发送请求并处理响应。我们可以将这个函数放在一个单独的文件中，以便在需要的时候导入使用。

function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

2. 封装不同的请求类型

在uniapp中，有五种不同的请求类型：GET、POST、PUT、DELETE和HEAD。我们可以根据不同的请求类型，对请求函数进行进一步封装。

function get(url, data) {
  return request({
    url,
    data,
    method: 'GET',
  });
}

function post(url, data) {
  return request({
    url,
    data,
    method: 'POST',
  });
}

function put(url, data) {
  return request({
    url,
    data,
    method: 'PUT',
  });
}

function del(url, data) {
  return request({
    url,
    data,
    method: 'DELETE',
  });
}

function head(url, data) {
  return request({
    url,
    data,
    method: 'HEAD',
  });
}

3. 添加错误处理

在实际开发中，我们可能会遇到各种各样的错误。因此，我们需要在请求函数中添加错误处理，以便在发生错误时能够及时处理。

function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(res);
        }
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

使用封装后的请求函数

封装好请求函数后，我们就可以在需要的时候直接调用这些函数来发送请求了。

// 发送一个GET请求
get('https://example.com/api/users').then((res) => {
  console.log(res);
});

// 发送一个POST请求
post('https://example.com/api/users', {
  name: 'John Doe',
  email: 'johndoe@example.com',
}).then((res) => {
  console.log(res);
});