【愚公系列】《微信小程序与云开发从入门到实践》036-在小程序中进行网络数据请求

原创

愚公搬代码

修改于 2025-01-25 08:27:21

26800

代码可运行

文章被收录于专栏：愚公系列-书籍专栏愚公系列-书籍专栏

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在移动互联网迅猛发展的今天，小程序作为一种轻量级的应用形式，受到了越来越多用户的青睐。它们不仅可以提供便捷的服务，还能快速实现各类功能，而网络数据请求则是小程序实现这些功能的核心环节之一。

无论是获取用户信息、展示商品数据，还是实时更新动态，网络请求都是不可或缺的。在这篇文章中，我们将深入探讨如何在小程序中进行网络数据请求，包括请求的基本方法、常见的API使用、数据处理与展示等实用技巧。通过这些内容，希望能够帮助小程序开发者在网络请求方面更得心应手，提升小程序的整体用户体验。

🚀一、在小程序中进行网络数据请求

网络数据请求实际上是指小程序客户端从服务后台获取数据的能力，此服务后台可以是产品的后端服务，可以是第三方的数据服务，也可以是小程序云开发服务。其实，使用小程序云开发的方式构建后端服务是相对方便且成本较低的，关于云开发后续会做具体的介绍，本文主要讨论从业务服务后台或第三方服务后台获取数据的方法。

🔎1.申请接口服务

🦋1.1 背景介绍

在实际的产品开发中，如果需要从服务后台获取数据，通常需要开发一个后端服务。然而，手动开发后台服务进行测试对于初学者来说有一定门槛。大多数情况下，后端服务的开发由专业的后端工程师完成。因此，本书不会介绍如何从零开始开发后端服务。幸运的是，许多公司和平台提供了现成的API接口服务，比如天气预报、新闻资讯等，开发者可以直接使用这些服务来进行测试。许多API服务价格非常亲民，甚至有免费的调用次数，非常适合初学者进行学习和测试。

🦋1.2 选择API接口服务

在互联网上搜索API接口服务，能找到大量提供相关功能的服务网站。

🔎2.在小程序中调用天气预报 API服务

需要注意，小程序为了安全性考虑，默认只有在小程序后台配置了的域名才能进行接口调用，但是可以在微信开发者工具中配置不进行域名校验，以方便测试，如图所示。

🦋2.1 新建 `utils` 文件夹和 `network.js` 文件

在示例工程的根目录下，新建一个名为 utils 的文件夹，并在该文件夹中创建一个名为 network.js 的文件。这个文件将包含所有与数据请求相关的逻辑。

代码如下：

// utils/network.js

const showapi_appid = "58027";        // 替换为你自己的 showapi appid
const showapi_sign = "4b9fcd59b844b98b6427da974f4xxx"; // 替换为你自己的 showapi sign

var network = {
  getWeatherData: function(area, callback) {
    wx.request({
      url: 'https://route.showapi.com/9-2',  // 设置请求的 URL
      data: {
        area: area,                  // 城市名
        needIndex: 1,                // 是否需要穿衣提示
        showapi_appid: showapi_appid, // showapi appid
        showapi_sign: showapi_sign,   // showapi sign
        showapi_timestamp: Date.now(), // 当前时间戳
      },
      method: 'GET',  // 请求方法为 GET
      success: (res) => {
        callback(res.data, null); // 请求成功，执行回调
      },
      fail: (res) => {
        callback(null, res); // 请求失败，执行回调
      }
    });
  }
};

module.exports = network;

🦋2.2 代码说明

showapi_appid 和 showapi_sign: 这两个静态变量是从万维易源后台获取的，你需要将其替换为你自己申请的应用信息。
network.getWeatherData: 这个方法封装了请求天气数据的逻辑。
wx.request: 微信小程序的 API，用于发起 HTTP/HTTPS 网络请求。在这里，设置了请求的 URL 和请求参数，包括城市名、时间戳、API 的 appid 和 sign 等。
callback(res.data, null): 请求成功时，调用回调函数并传递返回的数据。
callback(null, res): 请求失败时，调用回调函数并传递错误信息。

🦋2.3 在 `pages` 文件夹下新建 `networkDemo` 页面

在工程的 pages 文件夹下新建一个名为 networkDemo 的页面，并在其中编写请求测试代码。

首先在 networkDemo.wxml 文件中添加一个测试按钮：

<!-- pages/networkDemo/networkDemo.wxml -->
<button type="primary" bindtap="req">请求数据</button>

然后在 networkDemo.js 文件中编写按钮点击事件的处理方法：

// pages/networkDemo/networkDemo.js

let networkModule = require('../../utils/network.js');

Page({
  req: function() {
    networkModule.network.getWeatherData('上海', (res, error) => {
      console.log(res, error);  // 打印请求结果
    });
  }
});

🦋2.4 代码说明

require('../../utils/network.js'): 引入 network.js 模块，模块中封装了网络请求的逻辑。
networkModule.network.getWeatherData('上海', ...): 调用 network.js 中的 getWeatherData 方法，请求上海的天气数据，并定义回调函数处理请求结果。
bindtap="req": 将 wxml 中的按钮与 req 方法绑定。当用户点击按钮时，触发 req 方法，进而发起天气数据请求。

🦋2.5 运行代码

在微信开发者工具中，点击页面中的按钮，发起网络请求。你可以在控制台查看请求的输出内容，验证是否成功获取了数据。

🔎3.请求方法详解

🦋3.1 `wx.request` 方法详细介绍

wx.request 是微信小程序中用于发起网络请求的 API，支持发送 HTTP 或 HTTPS 请求。该方法需要传入一个配置对象，包含多个可用的属性。以下是该配置对象的主要属性及其含义：

表 9-1: wx.request 方法的配置对象属性

属性名	数据类型	说明
`url`	字符串	服务端接口地址
`data`	对象	请求参数，通常是 JSON 格式，传递给服务器的数据
`header`	对象	设置请求头中的字段，通常用于设置认证信息或自定义字段
`timeout`	数值	设置请求的超时时间，单位为毫秒
`method`	字符串	请求方法，常用值：`OPTIONS`、`GET`、`HEAD`、`POST`、`PUT`、`DELETE`、`TRACE`
`dataType`	字符串	设置返回数据的格式，常见值为 `json`、`text`、`arraybuffer`
`responseType`	字符串	设置响应数据的类型，常用值为 `text`、`arraybuffer` 等
`enableHttpDNS`	布尔值	是否开启 HTTP DNS 服务
`httpDNSServiceld`	字符串	设置 HTTP DNS 服务商 ID
`enableChunked`	布尔值	是否开启 `Transfer-Encoding: chunked` 功能（分块传输）
`forceCellularNetwork`	布尔值	是否强制使用蜂窝网络

表 9-2: success 回调中传入的结果对象的属性

请求成功时，success 回调中会传入结果对象，常见属性包括：

属性名	数据类型	说明
`data`	字符串、对象或字节数组	服务端返回的数据
`statusCode`	数值	HTTP 返回数据的状态码
`header`	对象	HTTP 返回数据的头部信息
`cookies`	数组	服务端返回的 cookies 数据
`profile`	对象	请求过程中的调试信息（详见表 9-3）

表 9-3: profile 对象封装的属性

profile 对象包含了请求过程中的一些网络性能信息，虽然在业务上通常不需要使用这些信息，但对于网络状态的评估和问题调试非常重要。以下是 profile 对象中封装的常见属性：

属性名	数据类型	说明
`dataType`	字符串	返回数据类型，通常为 `json` 或 `text`
`responseType`	字符串	响应数据类型，通常为 `text` 或 `arraybuffer`
`enableHttps`	布尔值	是否启用 HTTPS
`enableQuic`	布尔值	是否启用 QUIC 协议
`enableCache`	布尔值	是否启用缓存
`enableHttpDNS`	布尔值	是否启用 HTTP DNS 服务
`httpDNSServiceld`	字符串	HTTP DNS 服务商 ID
`enableChunked`	布尔值	是否启用分块传输功能（Transfer-Encoding: chunked）
`forceCellularNetwork`	布尔值	是否强制使用蜂窝网络
`redirectStart`	数值	第一次重定向发生的时间
`redirectEnd`	数值	最后一次重定向完成的时间
`fetchStart`	数值	HTTP 请求获取资源时的时间
`domainLookupStart`	数值	DNS 域名查询开始的时间
`domainLookupEnd`	数值	DNS 域名查询完成的时间
`connectStart`	数值	HTTP 开始建立连接的时间
`connectEnd`	数值	HTTP 完成建立连接的时间
`SSLconnectionStart`	数值	SSL 开始建立连接的时间
`SSLconnectionEnd`	数值	SSL 完成建立连接的时间
`requestStart`	数值	HTTP 请求的开始时间
`requestEnd`	数值	HTTP 请求的完成时间
`responseStart`	数值	HTTP 开始接收响应数据的时间
`responseEnd`	数值	HTTP 响应接收完成的时间
`rttEstimate`	数值	网络的往返时延（Round Trip Time）
`netType`	数值	当前网络类型，例如 Wi-Fi 或 4G
`httpRttEstimate`	数值	HTTP 协议层的网络往返时延估算
`transportRttEstimate`	数值	传输层的网络往返时延估算
`downstreamThroughputKbpsEstimate`	数值	当前网络下载速度估算（单位：Kbps）
`throughputKbps`	数值	当前网络下载的实际速度（单位：Kbps）
`peerPort`	字符串	当前请求的端口号
`socketReused`	布尔值	是否复用连接
`sendBytesCount`	数值	已发送的字节数
`receivedBytesCount`	数值	已接收的字节数
`protocol`	字符串	当前使用的协议（如 HTTP/1.1、HTTP/2 等）

🦋3.2 `profile` 数据的实际应用

profile 对象中的数据非常有用，尤其是在调试和优化网络性能时：

RTT (Round Trip Time): 反映了请求往返的时延。如果多次请求的 RTT 超过了 400ms，可能说明用户处于网络较差的环境中。
网络类型 (Net Type): 用于确定用户当前的网络状态，例如 Wi-Fi 或蜂窝数据。这个信息有助于判断用户网络质量的好坏。
下载吞吐量: 估算当前网络的下载速度。如果吞吐量较低，可能表示网络带宽受到限制。

🦋3.3 注意事项

profile 数据的返回条件: 只有在真机上进行测试时，才会返回 profile 相关的数据。此外，微信客户端的版本也会影响该数据的返回。在 Android 系统上，微信版本 7.0.12 及以上支持 profile 网络性能分析；在 iOS 系统上，版本 8.0.3 及以上支持。

🔎4.关于 RequestTask 对象

🦋4.1 `RequestTask` 对象简介

在调用 wx.request 方法后，立即返回一个 RequestTask 对象。这个对象提供了多个方法，允许开发者对请求过程进行监听、控制和处理。常见的应用场景包括：

提前终止请求：如果用户在请求数据时已经退出当前页面，可以使用 RequestTask 对象提前结束请求，避免不必要的操作。
添加监听事件：可以在请求过程中，监听不同的事件，例如接收 HTTP 响应头，或者接收分块数据等。

示例代码：手动终止请求

在某些场景下，可能需要在请求完成前提前中断请求。使用 RequestTask 对象的 abort() 方法可以实现这一点。以下是一个示例：

let req = wx.request({
  url: "https://route.showapi.com/9-2",
  data: {
    area: area,
    needIndex: 1,
    showapi_appid: showapi_appid,
    showapi_sign: showapi_sign,
    showapi_timestamp: Date.now(),
    method: 'GET'
  },
  success: (res) => {
    callback(res, null);
  },
  fail: (res) => {
    callback(null, res);
  }
});

// 手动终止请求
req.abort();

调用 req.abort() 后，当前的请求会被直接终止，且会触发 fail 回调函数，表示请求失败。

🦋4.3 `RequestTask` 对象的监听方法

RequestTask 对象提供了一些方法，用于在请求过程中监听特定事件或数据的到来。这些方法可以帮助开发者在请求过程中获取到更多信息，或者处理特殊的传输情况（如分块传输）。

表 9-4: RequestTask 对象的方法

方法名	参数类型	说明
`onHeadersReceived(callback)`	Function callback	监听服务端返回的 HTTP 响应头数据。通常在请求完成前，响应头会先到达。
`offHeadersReceived(callback)`	Function callback	取消监听服务端返回的 HTTP 响应头数据。
`onChunkReceived(callback)`	Function callback	监听分块传输的数据块。当数据按块传输时，接收到每个数据块时会触发回调。
`offChunkReceived(callback)`	Function callback	取消监听分块传输的数据块事件。

解释与应用场景

onHeadersReceived:
- 该方法允许监听 HTTP 响应头数据。通常在响应体返回之前，服务端会先发送响应头，开发者可以在此时处理一些信息（例如，获取响应头中的 Content-Type 等）。
- 示例代码：

req.onHeadersReceived((headers) => {
console.log("收到响应头:", headers);
});

onChunkReceived:
- 该方法用于监听分块传输的数据。当服务端返回的数据采用 Transfer-Encoding: chunked 分块传输时，每次接收到一个数据块，都会触发回调函数。
- onChunkReceived 允许你逐块处理服务器返回的部分数据，尤其适用于大文件的下载或者逐步获取数据的场景。
- 示例代码：

req.onChunkReceived((chunk) => {
console.log("收到数据块:", chunk);
});

offHeadersReceived 和 offChunkReceived:
- 这两个方法用于取消对响应头和分块数据的监听。通过这些方法，开发者可以在不再需要监听这些事件时，移除相应的回调，避免不必要的资源消耗。
- 示例代码：

req.offHeadersReceived(callback);
req.offChunkReceived(callback);

🦋4.4 分块传输 (Transfer-Encoding: chunked)

分块传输：在 HTTP 协议中，如果响应体较大，服务端可能会使用分块传输（Transfer-Encoding: chunked）来逐步发送数据，而不是一次性发送所有数据。
onChunkReceived 的作用：当请求的响应使用了分块传输时，onChunkReceived 监听的回调函数会在每个数据块到达时执行，开发者可以逐块处理数据。

🦋4.5 总结

wx.request 返回的 RequestTask 对象提供了多种控制和监听功能，允许开发者在请求过程中：
- 手动终止请求（abort() 方法）。
- 监听 HTTP 响应头（onHeadersReceived()）。
- 监听分块传输的数据块（onChunkReceived()），在数据逐步到达时进行处理。
使用 RequestTask 对象的这些方法，可以在更精细的层面上控制网络请求和响应，尤其是在处理大文件下载或需要中断请求的特殊场景时，极大提高了灵活性和性能。

通过这些方法，开发者可以根据实际需求优化请求过程、提高用户体验，特别是在网络请求可能耗时较长，或用户需要随时中断请求的情况下。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生