写点什么

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

作者:Speedoooo
  • 2022 年 2 月 10 日
  • 本文字数:1459 字

    阅读完需:约 5 分钟

本文首次发布于凡泰极客博客中:https://www.finclip.com/blog/first-app-ep07/


在上期文章中,我们主要聊了聊如何在小程序中使用 JS 处理内容或样式。本期文章中,我们要学习在小程序中发起一个网络请求,并成功获取请求返回的数据,主要包含了两个方面:


  1. 小程序服务器域名的配置

  2. 网络请求接口的使用


本期文章属于《手把手系列教学》的第七篇,如果你还不太了解这一系列,可以点击 这里 查看详情。

使用须知

小程序服务器域名的配置


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


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


  1. 域名只支持 https ;

  2. 可以配置端口,如 https://myserver.com:8080,但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败;

  3. 域名必须经过 ICP 备案;

  4. 如果不配置端口。如 https://myserver.com,那么请求的 URL 中也不能包含端口,甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败。


为了方便讲解,我们直接使用了微信小程序的要求进行讲解,但不要担心,在 FinClip 中,这一切内容都是通用的。根据上面注意点,我们即可完成小程序服务器域名的配置。接下来,我们使用网络请求接口发起请求并处理返回数据。


使用细节

网络请求接口的使用


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

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html


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


  1. 请求的地址,头部,及其他参数;

  2. 请求的数据;

  3. 返回的数据的处理。

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


我们使用 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.cn/shop/mcm/tradein-credit',header: {foo: 'bar'},data: {ids: 7877},method: 'POST'})


// 我们这里把请求方式改成了 'POST', 然后附带的请求的数据(设置了一个 ids)我们通过开发者工具查看该请求,可以看到这里的请求方式已经发生改变,并且携带了 payload:



处理返回数据


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


  1. success(请求成功的回调);

  2. fail(失败的回调);

  3. complete(无论成功失败都会执行)。


wx.request({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 的回调。回调函数打印了返回的数据,控制台能看到如下:



用户头像

Speedoooo

关注

还未添加个人签名 2021.10.08 加入

还未添加个人简介

评论

发布
暂无评论
小程序开发中使用网络请求