汤俊飞博客

在uniapp中，请求封装是一个常见的需求，以便更好地管理API调用和响应处理。下面是一个基本的请求封装示例，使用uniapp的uni.request方法。

1. 创建一个请求工具类

首先，创建一个名为request.js的文件，用于封装网络请求。

const BASE_URL = 'https://your-api-url.com'; // 你的API基础地址
function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: options.header || {
        'Content-Type': 'application/json'
      },
      success: (res) => {
        if (res.statusCode === 200) {
          // 这里可以根据实际情况处理响应数据
          resolve(res.data);
        } else {
          // 处理错误情况
          reject(res);
        }
      },
      fail: (err) => {
        // 请求失败
        reject(err);
      }
    });
  });
}
export default request;

2. 使用封装的请求工具

在其他文件中，你可以这样使用封装好的请求工具：

import request from '@/utils/request.js'; // 路径根据实际情况调整
function getUserInfo() {
  request({
    url: '/api/user/info',
    method: 'GET',
    // data: { userId: 123 }, // 如果是GET请求，参数可以放在url中
  }).then((res) => {
    console.log('用户信息:', res);
  }).catch((err) => {
    console.error('请求出错:', err);
  });
}

3. 拓展功能

拦截器: 在request.js中，可以在uni.request之前加入拦截器逻辑，比如设置统一的token。

错误处理: 可以增加更详细的错误处理逻辑，比如根据不同的错误码提示不同的错误信息。

超时处理: 设置timeout属性来处理请求超时。

loading提示: 在请求前显示loading，在请求结束后隐藏loading。

以下是一个包含拦截器和loading的示例：

// 添加拦截器逻辑
function requestInterceptor(options) {
  // 设置token等
  const token = uni.getStorageSync('token');
  if (token) {
    options.header['Authorization'] = 'Bearer ' + token;
  }
  return options;
}
function request(options) {
  // 显示loading
  uni.showLoading({ title: '加载中...' });
  options = requestInterceptor(options);
  return new Promise((resolve, reject) => {
    uni.request({
      // ... 其他配置
      success: (res) => {
        // 隐藏loading
        uni.hideLoading();
        // ... 其他逻辑
      },
      fail: (err) => {
        // 隐藏loading
        uni.hideLoading();
        // ... 其他逻辑
      }
    });
  });
}
export default request;