当前位置：首页 > uni-app

uniapp 网络封装

2026-02-05 20:19:54uni-app

uniapp 网络请求封装方法

uniapp 提供了 uni.request 进行网络请求，但直接使用会导致代码冗余。以下是常见的封装方案：

基础封装示例

创建一个 request.js 文件，封装基础请求功能：

uniapp 网络封装

const BASE_URL = 'https://api.example.com';

const request = (options) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        ...options.header
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(res.data);
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

export default request;

使用示例

import request from './request.js';

// GET 请求
request({
  url: '/user/list',
  method: 'GET'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

// POST 请求
request({
  url: '/user/add',
  method: 'POST',
  data: { name: 'John' }
}).then(res => {
  console.log(res);
});

进阶功能扩展

拦截器实现

uniapp 网络封装

在 request.js 中添加请求和响应拦截：

// 请求拦截
const requestInterceptor = (config) => {
  // 添加 token
  const token = uni.getStorageSync('token');
  if (token) {
    config.header.Authorization = `Bearer ${token}`;
  }
  return config;
};

// 响应拦截
const responseInterceptor = (response) => {
  if (response.data.code !== 200) {
    uni.showToast({ title: response.data.msg, icon: 'none' });
    return Promise.reject(response.data);
  }
  return response.data;
};

const request = (options) => {
  options = requestInterceptor(options) || options;
  return new Promise((resolve, reject) => {
    uni.request({
      // ...原有配置
      success: (res) => {
        resolve(responseInterceptor(res));
      },
      fail: (err) => {
        uni.showToast({ title: '网络错误', icon: 'none' });
        reject(err);
      }
    });
  });
};

超时与重试机制

添加超时控制和自动重试：

const request = (options) => {
  const retryCount = options.retry || 0;
  let currentRetry = 0;

  const doRequest = () => {
    return new Promise((resolve, reject) => {
      const timer = setTimeout(() => {
        reject(new Error('请求超时'));
      }, options.timeout || 10000);

      uni.request({
        // ...原有配置
        complete: () => clearTimeout(timer),
        success: (res) => {
          if (res.statusCode === 200) {
            resolve(res.data);
          } else if (currentRetry < retryCount) {
            currentRetry++;
            doRequest().then(resolve).catch(reject);
          } else {
            reject(res.data);
          }
        },
        fail: (err) => {
          if (currentRetry < retryCount) {
            currentRetry++;
            doRequest().then(resolve).catch(reject);
          } else {
            reject(err);
          }
        }
      });
    });
  };

  return doRequest();
};

TypeScript 支持

为封装添加类型定义：

interface RequestOptions {
  url: string;
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
  data?: any;
  header?: Record<string, string>;
  timeout?: number;
  retry?: number;
}

const request = (options: RequestOptions): Promise<any> => {
  // ...实现代码
};