UniApp中的HTTP请求

admin1周前 (05-21)it知识64

1. UniApp内置HTTP请求方法

UniApp提供了uni.request作为内置的HTTP请求API,具有以下特点:

  • 跨平台兼容‌:已为iOS、Android、H5等平台做了优化和适配

  • 简单易用‌:API设计简洁,支持Promise风格调用

  • 性能优越‌:原生实现,处理大数据量时性能表现良好

  • 维护成本低‌:无需关注底层网络库更新和维护

基本使用示例:

uni.request({
  url: 'https://example.com/api',
  method: 'GET',
  data: {name: 'lisa', age: 23},
  header: {'Content-Type': 'application/json'},
  success: (res) => console.log(res.data),
  fail: (err) => console.error(err)
});

平台差异说明‌:

  • delete请求不支持支付宝和头条小程序(HX2.6.15)

  • put请求不支持支付宝小程序(HX2.6.15)

2. 请求封装最佳实践(2025版)

2025年推荐的请求封装方式:

// my_http.js
let BASE_URL = '';
if(process.env.NODE_ENV === 'development') {
  BASE_URL = "本地/局域网后端接口"
} else {
  BASE_URL = '网上(服务器)接口'
}
export default function http(url, data = {}, method = 'GET') {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + url,
      data,
      method,
      header: {'Content-Type': 'application/json'},
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
}

使用方式:

import http from '@/utils/my_http';
// GET请求
http('/user/list').then(data => console.log(data));
// POST请求
http('/user/create', {name: 'John'}, 'POST').then(data => console.log(data));

这种封装方式提供了:

  • 环境区分(开发/生产)

  • 统一的请求前缀管理

  • Promise风格调用

  • 简化的接口调用方式

3. Axios集成方案

虽然UniApp内置了uni.request,但开发者仍可选择使用流行的Axios库:

安装与基础配置

npm install axios@0.27.2 --save

关键配置点‌:

import axios from 'axios';
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.adapter = config => { // 适配uni-app
  return new Promise((resolve, reject) => {
    uni.request({
      ...config,
      success: (res) => resolve(res),
      fail: (err) => reject(err)
    });
  });
};
const service = axios.create({
  baseURL: 'http://127.0.0.1:7777/',
  timeout: 6000
});

拦截器配置

// 请求拦截
service.interceptors.request.use(config => {
  if(config.url.indexOf("login") < 0) {
    config.headers['token'] = uni.getStorageSync('token');
  }
  return config;
});
// 响应拦截
service.interceptors.response.use(res => {
  if(res.status === 200 && res.data.code === 100) {
    uni.setStorageSync('token', res.data.token);
  }
  return res.data;
});

Axios优势‌:

  • 支持请求和响应拦截

  • 自动转化JSON格式

  • 取消请求功能

  • 防止CSRF(跨站请求伪造)

4. 跨域问题解决方案

UniApp开发中常见的跨域问题及解决方法:

App端解决方案

  1. 后端配置CORS‌:最直接的解决方案

  2. 代理服务器‌:转发请求避免跨域限制

  3. WebView设置‌:允许跨域访问

微信小程序解决方案

  1. 配置域名白名单‌:在微信公众平台配置合法域名

  2. 开发环境临时方案‌:勾选"不校验合法域名"选项

通用解决方案

// vite.config.js
export default defineConfig({
  plugins: [uni()],
  server: {
    port: 5173,
    https: false,
    cors: true, // 允许跨域
    proxy: { // 代理配置
      '/api': {
        target: 'http://your-backend.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});

注意‌:小程序和App本身没有浏览器的同源策略限制,跨域主要是H5开发时的问题

5. 错误处理与调试技巧

常见错误类型

  1. 跨域限制‌:检查域名白名单和CORS配置

  2. 网络权限‌:确认manifest.json中网络权限已开启

  3. HTTPS配置‌:iOS设备对HTTPS有严格要求

  4. 证书验证‌:开发阶段可临时关闭证书验证

错误处理最佳实践

// 封装统一的错误处理
function handleError(error) {
  if(error.errMsg.includes('timeout')) {
    uni.showToast({title: '请求超时', icon: 'none'});
  } else if(error.statusCode === 401) {
    uni.showToast({title: '未授权', icon: 'none'});
    uni.navigateTo({url: '/pages/login/login'});
  } else {
    uni.showToast({title: '网络错误', icon: 'none'});
  }
  console.error(error);
}
// 使用示例
uni.request({
  url: 'https://example.com/api',
  fail: handleError,
  complete: (res) => {
    if(res.statusCode !== 200) {
      handleError(res);
    }
  }
});

真机调试技巧

  1. 使用uni.getSystemInfo获取设备信息辅助调试

  2. 通过uni.onNetworkStatusChange监听网络状态变化

  3. 利用HBuilderX的"真机运行"功能直接调试

  4. 查看设备日志定位具体错误

6. 性能优化与高级配置

超时设置

// 全局超时设置
uni.request({
  url: 'https://example.com/api',
  timeout: 30000, // 30秒超时
  // ...
});
// 封装中的超时配置
const service = axios.create({
  baseURL: 'http://your-api.com',
  timeout: 6000 // 6秒超时
});

请求取消

// 使用AbortController取消请求(仅H5)
const controller = new AbortController();
uni.request({
  url: 'https://example.com/api',
  signal: controller.signal
});
// 取消请求
controller.abort();

缓存策略

// 简单缓存实现
const cache = {};
function cachedRequest(url) {
  if(cache[url]) {
    return Promise.resolve(cache[url]);
  }
  return uni.request({url}).then(res => {
    cache[url] = res.data;
    return res.data;
  });
}

7. uni.request vs Axios对比

特性uni.requestAxios
平台兼容性官方支持,各平台优化需要额外适配uni-app环境
拦截器无内置拦截器支持请求/响应拦截
取消请求不支持支持
自动JSON转换需要手动处理自动转换
CSRF防护内置防护
TypeScript支持一般优秀
学习曲线简单中等
社区支持限于uni-app生态广泛

选择建议‌:

  • 简单项目:直接使用uni.request

  • 复杂项目:集成Axios以获得更强大的功能

  • 需要取消请求/拦截器:选择Axios

  • 追求最小依赖:使用uni.request

8. 2025年最新推荐

根据2025年的开发实践,推荐以下HTTP请求方案:

  1. 基础项目‌:使用官方uni.request配合简单封装

  2. 企业级项目‌:采用Axios+拦截器+TypeScript的完整方案

  3. 高性能要求‌:考虑使用@anyup/uni-http等优化库

  4. 多环境管理‌:通过process.env区分开发/生产环境

  5. 安全实践‌:强制HTTPS、请求签名、token刷新机制

通过以上方案,开发者可以在UniApp中构建健壮、高效的HTTP请求体系,满足各种业务场景需求

标签: 分享IT知识

相关文章

技术与艺术的融合:创造无比魅力的结合

在人类文明的发展史上,技术与艺术如同一对形影不离的伙伴,共同推动了人类社会的进步。随着科技的飞速发展,技术与艺术的融合愈发紧密,为我们揭示了一个全新的视角,让我们重新审视这两股强大的力量。在当今数字化...

优美程序是怎样的

程序优美是一个主观的概念,每个人可能会有不同的看法。然而,以下是一些可能导致程序优美的因素:简洁性:优美的程序应该尽可能地简洁明了。这意味着应该使用尽可能少的数据结构和算法,以及尽可能简单的代码。可读...

享受工作:找到事业与生活的平衡点

工作是我们日常生活中不可或缺的一部分。我们花费大量的时间和精力在工作中,因此,如何享受工作并找到事业与生活的平衡点就显得尤为重要。在这篇文章中,我们将探讨如何享受工作,让事业和生活愉快并行。首先,了解...

如何高效学习

努力和技巧的能力。以下是一些可以帮助你高效学习的方法:制定学习计划:制定一个清晰的学习计划,包括学习内容和时间表,有助于你更好地组织自己的学习并提高学习效率。创造良好的学习环境:在学习时,尽可能避免干...

如何写文章

过程,需要一定的技巧和准备。以下是一些写文章的步骤和技巧:确定文章的主题和目的:在开始写作之前,您需要明确文章的主题和目的。这有助于您确定文章的重点和方向。研究和收集信息:在开始写作之前,进行一些研究...

双因素理论

双因素理论是美国心理学家弗雷德里克·赫兹伯格(Frederick·Herzberg)于20世纪50年代后期提出的,这一理论的研究重点是组织中的人与工作的关系问题。双因素理论包括保健因素和激励因素。保健...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。