🚀前言

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

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

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

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

🔎1.申请接口服务

🦋1.1 背景介绍

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

🦋1.2 选择API接口服务

在互联网上搜索API接口服务，能找到大量提供相关功能的服务网站。例如，万维易源（Showapi）是一个常用的API服务提供平台。其主页地址为：https://www.showapi.com/。

要使用其提供的API接口，首先需要注册成为会员，注册地址为：https://www.showapi.com/auth/reg。

🦋1.3 注册与登录

进入注册页面后，填写相关信息并完成注册。注册成功后，可以登录到万维易源网站，选择需要的API接口服务。

🦋1.4 选择API服务

登录后，在首页选择 API市场 栏目，进入API列表页面。在这里，你可以找到各种常用的API服务。例如，你可以选择天气预报API服务，点击进入该服务的详情页。

该天气预报API服务并非完全免费，但提供了一个免费的测试资源包，允许在1个月内免费调用接口200次。虽然免费次数有限，但对于学习者而言，通常已经足够使用。

🦋1.5 接口文档和使用

在每个API服务的详情页中，提供了非常重要的接口文档。该文档详细描述了接口的使用方式、所需传参、以及返回数据的格式。在开始使用API之前，一定要详细阅读文档，确保理解如何正确调用接口。

完成准备工作后，可以使用网页中的在线调试功能测试接口，查看接口是否正常工作，并查看真实的接口返回数据。

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

在万维易源网站的API测试页面已经可以调通，但想要在小程序中使用还要获取到 appId 和秘钥。进入万维易源会员后台，在“我的应用”栏中新建一个App应用，如图所示。

在新建应用页面中，填写APP的名字，无须设置白名单IP，将可调用的接口选择“全部”即可。创建好了应用后，即可查看此应用的showapi_appid和secret值，如图所示。

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

🦋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 方法的配置对象属性

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

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

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

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

🦋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 对象的方法

解释与应用场景

1. onHeadersReceived:

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

   • 示例代码：

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

2. onChunkReceived:

   • 该方法用于监听分块传输的数据。当服务端返回的数据采用 Transfer-Encoding: chunked 分块传输时，每次接收到一个数据块，都会触发回调函数。

   • onChunkReceived 允许你逐块处理服务器返回的部分数据，尤其适用于大文件的下载或者逐步获取数据的场景。

   • 示例代码：

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

3. 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 对象的这些方法，可以在更精细的层面上控制网络请求和响应，尤其是在处理大文件下载或需要中断请求的特殊场景时，极大提高了灵活性和性能。

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