微信小程序网络数据请求

一、前言

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

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

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

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

二、wx.request() 简介

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

✅ 示例：最简单的 GET 请求

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

三、常用参数详解

四、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-Type 为 application/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. 域名必须配置在白名单中

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

⚠️ 开发工具中可临时开启“不校验合法域名、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));

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

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

十二、结语

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