微信小程序网络数据请求

发布于:2025-07-13 ⋅ 阅读:(23) ⋅ 点赞:(0)

一、前言

在网络应用中,获取远程数据是小程序开发中最常见的任务之一。微信小程序提供了强大的网络请求接口 —— wx.request(),它支持发送 HTTP 请求,并能处理 JSON、文本等多种格式的数据。

本文将带你全面了解小程序中网络请求的使用方式,包括:

wx.request() 的基本结构与参数说明
✅ 如何发起 GET 和 POST 请求
✅ 设置请求头、传递请求参数
✅ 处理成功和失败回调
✅ 域名白名单配置与 HTTPS 要求
✅ 网络请求封装技巧与拦截器设计
✅ 实际开发中的错误处理与性能优化建议

并通过完整的代码示例,帮助你快速上手并熟练使用小程序网络通信功能。

二、wx.request() 简介

wx.request() 是微信小程序提供的用于发起网络请求的标准 API,支持 GETPOSTPUTDELETE 等常见 HTTP 方法。

✅ 示例:最简单的 GET 请求

wx.request({
  url: 'https://api.example.com/data',
  success(res) {
    console.log('请求成功:', res.data);
  },
  fail(err) {
    console.error('请求失败:', err);
  }
});

三、常用参数详解

参数 类型 必填 描述
url String ✅ 是 请求地址(必须为 HTTPS)
data Object/String/ArrayBuffer ❌ 否 请求参数(GET 自动拼接 URL,POST 放 body)
header Object ❌ 否 自定义请求头
method String ❌ 否 请求方法,默认 GET
dataType String ❌ 否 返回数据类型,默认 json
success Function ❌ 否 成功回调
fail Function ❌ 否 失败回调
complete Function ❌ 否 请求完成回调(无论成功或失败都会执行)

四、GET 请求示例

✅ 示例:带查询参数的 GET 请求

wx.request({
  url: 'https://api.example.com/users',
  data: {
    page: 1,
    pageSize: 10
  },
  success(res) {
    console.log('用户列表:', res.data);
  }
});

⚠️ 注意:GET 请求的参数会自动拼接到 URL 上,例如变成:https://api.example.com/users?page=1&pageSize=10

五、POST 请求示例

✅ 示例:发送 JSON 数据的 POST 请求

wx.request({
  url: 'https://api.example.com/login',
  method: 'POST',
  header: {
    'content-type': 'application/json'
  },
  data: {
    username: 'admin',
    password: '123456'
  },
  success(res) {
    console.log('登录结果:', res.data);
  }
});

💡 默认情况下,POST 请求的 Content-Typeapplication/json,你可以根据需要修改。

六、设置请求头(Header)

通过 header 字段可以自定义请求头信息,常用于设置身份验证 Token、指定返回语言等。

✅ 示例:添加 Token 到请求头

const token = wx.getStorageSync('token');

wx.request({
  url: 'https://api.example.com/user/profile',
  header: {
    'Authorization': `Bearer ${token}`,
    'Accept-Language': 'zh-CN'
  },
  success(res) {
    console.log('用户资料:', res.data);
  }
});

七、网络请求的限制与安全机制

为了保障用户隐私和系统安全,微信小程序对网络请求做了如下限制:

✅ 1. 必须使用 HTTPS 协议

所有请求必须基于 HTTPS,否则无法正常运行。

✅ 2. 域名必须配置在白名单中

进入微信公众平台 → 【开发管理】→【开发设置】→【服务器域名】,添加你的服务器域名。

类型 示例
request合法域名 https://api.example.com
socket合法域名 wss://socket.example.com
uploadFile合法域名 https://upload.example.com
downloadFile合法域名 https://download.example.com

⚠️ 开发工具中可临时开启“不校验合法域名、HTTPS 证书”,但上线后必须关闭!

八、网络请求封装技巧

为了提高代码复用性和可维护性,我们可以对 wx.request() 进行封装,统一处理请求、响应、错误等逻辑。

✅ 示例:基础封装(utils/request.js)

function request(options) {
  const defaultOptions = {
    url: options.url,
    method: options.method || 'GET',
    data: options.data || {},
    header: {
      'content-type': 'application/json',
      ...options.header
    }
  };

  return new Promise((resolve, reject) => {
    wx.request({
      ...defaultOptions,
      success(res) {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data);
        } else {
          wx.showToast({ title: '请求异常', icon: 'none' });
          reject(res);
        }
      },
      fail(err) {
        wx.showToast({ title: '网络异常', icon: 'none' });
        reject(err);
      }
    });
  });
}

export default request;

✅ 使用封装后的请求

import request from '../../utils/request';

request({
  url: 'https://api.example.com/data',
  method: 'GET'
})
.then(data => {
  console.log('数据:', data);
})
.catch(err => {
  console.error('错误:', err);
});

九、错误处理与重试机制

网络请求可能因多种原因失败,如网络不稳定、服务器错误等。我们可以通过统一的错误处理函数来增强健壮性。

✅ 示例:添加重试机制

function retryRequest(fn, retries = 3) {
  return new Promise((resolve, reject) => {
    let attempt = 0;

    const tryRequest = () => {
      fn()
        .then(resolve)
        .catch(err => {
          attempt++;
          if (attempt <= retries) {
            setTimeout(tryRequest, 1000); // 1秒后重试
          } else {
            reject(err);
          }
        });
    };

    tryRequest();
  });
}

// 使用示例
retryRequest(() => request({ url: 'https://api.example.com/data' }))
  .then(data => console.log('成功:', data))
  .catch(err => console.error('失败:', err));

十、实际开发建议与最佳实践

场景 建议
接口集中管理 ✅ 创建 api.js 统一管理所有接口
请求拦截 ✅ 在封装中统一添加 Token、Loading 提示
错误提示友好 ✅ 根据不同错误码显示用户友好的提示
避免重复请求 ✅ 对频繁调用的接口做节流控制
日志记录 ✅ 开发阶段打印请求日志,方便调试
安全防护 ✅ 不暴露敏感信息,防止 XSS/注入攻击

十一、总结对比表:wx.request() 常用参数一览

参数 描述
url 请求地址(必须 HTTPS)
method 请求方法(GET/POST/PUT/DELETE)
data 请求参数
header 请求头信息
success 成功回调
fail 失败回调
complete 请求完成回调
dataType 返回数据类型(默认 json)

十二、结语

感谢您的阅读!如果你有任何疑问或想要分享的经验,请在评论区留言交流!


网站公告

今日签到

点亮在社区的每一天
去签到