微信小程序网络请求 wx.request 详解

在前面的学习中，我们已经掌握了小程序的界面构建和数据绑定。但一个完整的应用离不开与服务器的数据交互，比如获取用户信息、加载商品列表、提交表单数据等。今天，我们将学习小程序中实现网络通信的核心 API------wx.request()，它相当于小程序与服务器之间的"信使"，负责在前端和后端之间传递数据。

一、什么是 wx.request

wx.request() 是小程序提供的网络请求 API，用于发起 HTTPS 请求，与指定的服务器接口进行数据交互。无论是获取数据（GET 请求）还是提交数据（POST 请求），都需要通过这个函数来实现。

1.1 基本特点

无需声明 ：wx.request 函数是微信小程序框架内置的，使用时不用声明，直接调用即可
HTTPS 限制：小程序要求所有网络请求必须使用 HTTPS 协议，确保数据传输安全
域名限制：请求的域名必须在微信公众平台后台配置的合法域名列表中

1.2 域名配置要求

在小程序开发中，所有网络请求的域名都需要在微信公众平台进行配置：

配置步骤：

①登录微信公众平台

②进入小程序管理后台

③点击左侧菜单"开发" → "开发管理"

④选择"开发设置"选项卡

⑤找到"服务器域名"配置项

在这里可以添加 request 合法域名，注意以下几点：

域名必须使用 HTTPS 协议
一个域名只能配置最多 20 个合法域名
一个月内最多能修改5次

微信开发者工具配置：

在开发过程中如果还没有配置HTTPS域名，为了方便调试，可以在微信开发者工具中临时关闭域名校验：

①打开微信开发者工具

②点击右上角"详情"

③在"本地设置"中勾选"不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书"

也可以在项目配置中增加合法域名：

二、wx.request 的基本使用

2.1 请求方法的类型

DELETE	删除数据	删除记录、移除项目等

wx.request() 接受一个对象作为参数，这个对象包含多个配置项来控制请求的各个方面。

2.2 主要参数说明

javascript

复制代码

wx.request({
  // 必填参数
  url: 'https://api.example.com/api/data',  // 服务器接口地址
  
  // 可选参数
  method: 'GET',           // 请求方法：GET、POST、PUT、DELETE 等，其他地方基本不变
  data: {                  // 请求参数（要发送给服务器的数据）
    id: 1,
    name: '张三'
  },
  header: {                // 设置请求的 header
    'content-type': 'application/json'
  },
  dataType: 'json',        // 返回的数据格式：json、text 等
  responseType: 'text',    // 响应的数据类型
  
  // 回调函数
  success: function(res) {
    // 请求成功时的处理
    console.log(res.data)
  },
  fail: function(err) {
    // 请求失败时的处理
    console.error(err)
  },
  complete: function() {
    // 请求完成时的处理（无论成功或失败都会执行）
    console.log('请求完成')
  }
})

三、实际应用示例

3.1 获取商品列表（GET 请求）

在实际开发中，我们经常需要在页面加载时自动获取数据：

javascript

复制代码

Page({
  data: {
    goodsList: [],      // 商品列表数据
    loading: true       // 加载状态
  },
  
  onLoad: function() {
    // 一进入页面就自动发起请求
    this.getGoodsList()
  },
  
  // 获取商品列表的方法
  getGoodsList: function() {
    wx.request({
      url: 'https://api.example.com/goods/list',
      method: 'GET',
      data: {
        page: 1,
        pageSize: 10
      },
      success: (res) => {
        if (res.statusCode === 200) {
          this.setData({
            goodsList: res.data.list,
            loading: false
          })
        }
      },
      fail: (err) => {
        console.error('获取商品列表失败:', err)
        this.setData({ loading: false })
        
        // 显示错误提示
        wx.showToast({
          title: '加载失败',
          icon: 'error'
        })
      }
    })
  }
})

在实际的开发项目中，有时为了不耽误项目进度，在前端开发阶段后端接口可能还没有准备好。这时候，我们可以使用一些模拟数据来进行前端开发和测试：

3.2 使用本地模拟数据

javascript

复制代码

// 在接口尚未开发完成时，可以使用模拟数据
getGoodsList: function() {
  // 开发阶段使用模拟数据
  const mockData = {
    list: [
      { id: 1, name: '商品1', price: 100 },
      { id: 2, name: '商品2', price: 200 },
      { id: 3, name: '商品3', price: 300 }
    ]
  }
  
  // 模拟网络请求延迟
  setTimeout(() => {
    this.setData({
      goodsList: mockData.list,
      loading: false
    })
  }, 500)
  
  // 实际接口开发完成后，再替换为真实的 wx.request 调用
  /*
  wx.request({
    url: 'https://api.example.com/goods/list',
    // ... 其他参数
  })
  */
}

注意： 这只是开发阶段的临时方案。当后端接口开发完成后，需要及时替换为真实的网络请求，并在微信公众平台配置合法的域名。

写在最后：

良好的网络请求处理不仅能实现功能需求，还能显著提升用户体验。在实际开发中，要合理规划开发进度，前端和后端协同工作，最终实现完整的网络通信功能。