小程序网络数据请求

小程序网络数据请求

限制

出于安全性的考虑，小程序对数据接口的请求做出了以下两个限制：

1. 只能请求 HTTPS 类型的接口
2. 必须将接口的域名添加到信任列表中

配置 request 合法域名

在自己的小程序中，需要请求某个域名下的接口，需要先配置该域名为 request 合法域名。具体步骤如下：

1. 登录微信小程序管理后台
2. 进入 开发 -> 开发设置 -> 服务器域名
3. 修改 request 合法域名

需要注意以下事项：

• 域名只支持 HTTPS 协议
• 域名不能使用 IP 地址或 localhost
• 域名必须经过 ICP 备案
• 服务器域名一个月内最多可申请 5 次修改

发起 GET 请求

调用 wx.request() 方法，可以发起 GET 数据请求。示例代码如下：

wx.request({
  url: 'https://www.example.com/api/get', // 请求的接口地址，必须基于 HTTPS 协议
  method: 'GET', // 请求的方式
  data: {
    // 发送到服务器的数据
    name: 'zs',
    age: 22
  },
  success: (res) => {
    // 请求成功之后的回调函数
    console.log(res)
  }
})

发起 POST 请求

调用 wx.request() 方法，可以发起 POST 数据请求。示例代码如下：

wx.request({
  url: 'https://www.example.com/api/post', // 请求的接口地址，必须基于 HTTPS 协议
  method: 'POST', // 请求的方式
  data: {
    // 发送到服务器的数据
    name: 'ls',
    gender: '男'
  },
  success: (res) => {
    // 请求成功之后的回调函数
    console.log(res)
  }
})

在页面刚加载时请求数据

需要在页面的 onLoad 事件中调用获取数据的函数，示例代码如下：

// pages/home/home.js
Page({
  GetInfo(){
    wx.request({
      url: 'https://www.escook.cn/api/get', // 请求的接口地址，必须基于 HTTPS 协议
      method: 'GET', // 请求的方式
      data: {
        // 发送到服务器的数据
        name: 'zs',
        age: 22
      },
      success: (res) => {
        // 请求成功之后的回调函数
        console.log(res)
      }
    })    
  },
  PostInfo(){
    wx.request({
      url: 'https://www.escook.cn/api/post', // 请求的接口地址，必须基于 HTTPS 协议
      method: 'POST', // 请求的方式
      data: {
        // 发送到服务器的数据
        name: 'ls',
        gender: '男'
      },
      success: (res) => {
        // 请求成功之后的回调函数
        console.log(res.data)
      }
    })
  },
  onLoad(options) {
    this.GetInfo()
    this.PostInfo()
  },
})

运行结果