微信小程序 wx.request(接口调用方式)详解及实例

下面是微信小程序 wx.request(接口调用方式)详解及实例攻略。

什么是 wx.request

在微信小程序中，我们经常需要请求服务器接口来获取数据，这就需要用到 wx.request 这个接口。

wx.request 是微信小程序中提供的一个用于发起 HTTP 请求的 API 接口，可以用于请求服务器接口、上传文件、下载文件等各种场景。

使用 wx.request 发起 HTTP 请求时，我们需要传入一个对象，并配置该对象的一些属性，包括：

• url：请求的接口地址；
• data：请求参数，可以是普通对象、数组、字符串等数据格式，也可以是 ArrayBuffer 类型的数据，用于上传文件；
• header：请求 header 头部设置；
• method：请求方法类型，默认为 GET；
• dataType：响应的数据类型，默认为 json；
• success、fail、complete：请求成功、失败、完成后所触发的回调函数。

如何使用 wx.request

下面我将为大家演示如何使用 wx.request 进行服务器接口请求。在这个示例中，我们将请求一个开放 API 接口，用于获取北京的天气信息。

// index.js
Page({
  data: {
    city: "",
    temperature: ""
  },

  onLoad: function () {
    var that = this;

    wx.request({
      url: 'https://api.seniverse.com/v3/weather/now.json',
      data: {
        key: 'your_key', // 你的私钥
        location: 'beijing' // 你要查询的城市名称
      },
      success: function (res) {
        console.log(res);
        that.setData({
          city: res.data.results[0].location.name, // 显示查询城市名称
          temperature: res.data.results[0].now.temperature // 显示查询城市的温度信息
        });
      }
    })
  }
})

上面这个示例中，我们在 onLoad 生命周期回调函数中，使用 wx.request 发起了一个请求，请求的接口是 https://api.seniverse.com/v3/weather/now.json，这个接口提供了天气查询的功能。

我们在 data 中定义了 city 和 temperature 两个数据变量，当请求成功后，我们将返回的数据中的城市名称和温度信息分别赋值给了这两个变量，用于在页面中进行展示。

如何传递复杂参数

有些时候，我们需要传递一些复杂的参数给服务器接口。举个例子，我们需要查询一段时间范围内的数据，传递的参数数据格式为：

{
  start_time: "2021-01-01 08:00:00",
  end_time: "2021-03-31 23:59:59",
  filters: [
    {
      key: "color",
      value: "red"
    },
    {
      key: "size",
      value: "XL"
    }
  ]
}

上面这个数据格式包含了一个时间范围和多个过滤条件，我们需要将它传递给服务器接口进行查询。这个时候，我们需要将这个数据进行序列化后，传递给 wx.request 的 data 属性。

wx.request({
  url: 'https://api.example.com',
  method: 'POST',
  data: JSON.stringify({
    start_time: "2021-01-01 08:00:00",
    end_time: "2021-03-31 23:59:59",
    filters: [
      {
        key: "color",
        value: "red"
      },
      {
        key: "size",
        value: "XL"
      }
    ]
  }),
  header: {
    'content-type': 'application/json'
  },
  success: function (res) {
    console.log(res);
  }
})

在上面的示例中，我们通过 JSON.stringify 方法将参数对象进行序列化，然后将序列化后的字符串传递给了 wx.request 的 data 属性。同时，在 header 属性中设置了请求的 content-type 为 application/json，表示请求中传递的数据类型为 JSON 格式。

好了，以上就是 wx.request 接口的详细讲解及实例操作，希望对你有所帮助。