保姆级教程：写出自己的移动应用和小程序（篇七）
source link: https://blog.51cto.com/u_15730483/5585606
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
保姆级教程：写出自己的移动应用和小程序（篇七）
精选 原创上期文章中，我们主要学习了如何在小程序中使用 JS 处理内容或样式。今天我们要学习如何在小程序中发起一个网络请求，并成功获取请求返回的数据。
小程序服务器域名的配置
在发起网络请求的时候需要填写接口地址，而小程序出于安全请求，必须是配置了服务器域名的接口地址，才能成功的发起网络请求。那么，以下我们来学习如何进行小程序服务器域名的配置。
服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，配置时需要注意：
为了方便讲解，我们直接使用了微信小程序的要求进行讲解，但不要担心，在 FinClip 中，这一切内容都是通用的。
根据上面注意点，我们即可完成小程序服务器域名的配置。接下来，我们使用网络请求接口发起请求并处理返回数据。
网络请求接口的使用
小程序中, 发起一个网络请求主要用的接口是 wx.request 。我们可以参考相应的接口文档：
< https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html>
这个接口主要涉及到以下几块：
- 请求的地址，头部，及其他参数；
- 请求的数据；
- 返回的数据的处理。
请求的地址，头部，及其他参数
我们使用 wx.request ，传入以下参数，完成请求地址与头部等内容的设置：
url: '<https://mp.finogeeks.com>',
header: {
foo: 'bar'
},
method: 'GET'
})
// 该参数配置的意思是：通过 GET 方式往 ‘<https://mp.finogeeks.com>’ 发送一个请求，请求都带上 foo：bar
我们通过开发者工具看该请求，可以看到请求相关的配置都会出现在请求的信息中：
请求的数据
通常来说，我们在使用 POST 请求的时候，会携带一些数据，而在小程序中，这些数据是在 data 中配置的，修改一下上面的例子：
url: '<https://www.apple.com.cn/shop/mcm/tradein-credit>',
header: {
foo: 'bar'
},
data: {
ids: 7877
},
method: 'POST'
})
// 我们这里把请求方式改成了 'POST', 然后附带的请求的数据（设置了一个 ids）
我们通过开发者工具查看该请求，可以看到这里的请求方式已经发生改变，并且携带了 payload：
处理返回数据
当请求成功后，会返回预期的数据，一般返回的是一个对象（JSON）, 那么我们如何获取并处理返回数据呢，wx.request 接口提供了几个 callback 函数用于处理接口不同情况的返回，分别是：
- success（请求成功的回调）；
- fail（失败的回调）；
- complete（无论成功失败都会执行）。
url: '<https://www.apple.com.cn/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 的回调。回调函数打印了返回的数据，控制台能看到如下：
下一期文章我们将会聊聊如何查看小程序的组件文档，组件的实际使用演示。 更多信息可关注 FinCip官网查看。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK