小程序开发中使用网络请求

本文首发于 FinClip 博客。

我们总是会需要在小程序之中处理对应的网络请求，以及关注如何通过请求获得对应的数据。到底需要怎么做呢？

在小程序中发起一个网络请求，并成功获取请求返回的数据，主要包含了两个方面：

小程序服务器域名的配置 网络请求接口的使用

使用须知

小程序服务器域名的配置

在发起网络请求的时候需要填写接口地址，而小程序出于安全请求，必须是配置了服务器域名的接口地址，才能成功的发起网络请求。那么，以下我们来学习如何进行小程序服务器域名的配置。

服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，配置时需要注意：

域名只支持 https ； 可以配置端口，如 myserver.com:8080，但是配置后只能向 myserver.com:8080 发起请求。如果向 myserver.com、myserver.com:9091 等 URL 请求则会失败； 域名必须经过 ICP 备案； 如果不配置端口。如 myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 myserver.com:443 请求则会失败。

为了方便讲解，我们直接使用了微信小程序的要求进行讲解，但不要担心，在 FinClip 中，这一切内容都是通用的。

根据上面注意点，我们即可完成小程序服务器域名的配置。接下来，我们使用网络请求接口发起请求并处理返回数据。

使用细节

网络请求接口的使用

小程序中, 发起一个网络请求主要用的接口是 wx.request 。我们可以参考相应的接口文档：

developers.weixin.qq.com/miniprogram…

这个接口主要涉及到以下几块：

请求的地址，头部，及其他参数； 请求的数据； 返回的数据的处理。

请求的地址，头部，及其他参数

我们使用 wx.request ，传入以下参数，完成请求地址与头部等内容的设置：

wx.request({ url: <https://mp.finogeeks.com>, header: { foo: bar }, method: GET }) // 该参数配置的意思是：通过 GET 方式往 ‘<https://mp.finogeeks.com>’ 发送一个请求，请求都带上 foo：bar

我们通过开发者工具看该请求，可以看到请求相关的配置都会出现在请求的信息中：

请求的数据

通常来说，我们在使用 POST 请求的时候，会携带一些数据，而在小程序中，这些数据是在 data 中配置的，修改一下上面的例子：

wx.request({ url: <https://www.apple.com-/shop/mcm/tradein-credit>, header: { foo: bar }, data: { ids: 7877 }, method: POST }) // 我们这里把请求方式改成了 POST, 然后附带的请求的数据（设置了一个 ids）

我们通过开发者工具查看该请求，可以看到这里的请求方式已经发生改变，并且携带了 payload：

处理返回数据

当请求成功后，会返回预期的数据，一般返回的是一个对象（JSON）, 那么我们如何获取并处理返回数据呢，wx.request 接口提供了几个 callback 函数用于处理接口不同情况的返回，分别是：

success（请求成功的回调）； fail（失败的回调）； complete（无论成功失败都会执行）。 wx.request({ url: <https://www.apple.com-/shop/mcm/tradein-credit>, header: { foo: bar }, data: { ids: 7877 }, method: POST, success: function(res) { console.log(res, success) }, fail: function(res) { console.log(res, fail) }, complete: function(res) { console.log(res, complete) } })

该请求是成功返回数据的，所以会按顺序执行 success ， complete 的回调。回调函数打印了返回的数据，控制台能看到如下：