第7次课 · 第3章 · 3课时
网络请求与分页加载
1
教学目标
- 掌握wx.request网络请求的用法
- 理解Promise与异步请求封装
- 掌握分页加载与下拉刷新的实现
- 能够对接后端API获取数据
- 案例：案例3-3 美食列表
2
重点、难点与课时分配
教学重点
wx.request、Promise封装、分页加载、下拉刷新
教学难点
异步请求处理、分页逻辑
课时分配（共 3 学时）
网络请求与分页讲解 1 学时，案例 3-3 美食列表实操 2 学时
3
课件要点
wx.request 网络请求
url — 请求地址(必须HTTPS)
method — 请求方法(GET/POST)
data — 请求参数
header — 请求头(content-type默认application/json)
success / fail / complete 回调
Promise封装请求
封装为Promise: return new Promise((resolve, reject) => {})
async/await语法糖: const res = await request(url)
统一错误处理: 封装公共fail回调
统一请求头: 封装token等认证信息
请求模块化: 按功能拆分API文件
分页加载与下拉刷新
上拉加载: onReachBottom触发, 请求下一页数据
下拉刷新: onPullDownRefresh触发, 重置数据
分页参数: page / pageSize
加载状态: isLoading防止重复请求
触底距离: onReachBottomDistance配置
案例3-3 美食列表
使用wx.request请求美食数据API
实现上拉加载更多(分页)
实现下拉刷新(重置列表)
加载状态提示(loading/没有更多了)
封装请求模块统一管理API
4
代码示例与讲解
wx.request网络请求
request.js
wx.request 请求流程
1// wx.request 基本用法
2wx.request({
3 url: 'https://api.example.com/data',
4 method: 'GET',
5 data: { page: 1, size: 10 },
6 header: {
7 'content-type': 'application/json'
8 },
9 success(res) {
10 console.log(res.data)
11 },
12 fail(err) {
13 console.error('请求失败', err)
14 },
15 complete() {
16 console.log('请求完成（无论成功失败）')
17 }
18})
19
20// ⚠️ 注意事项
21// 1. 必须在 app.json 配置合法域名
22// 2. 并发上限 10 个请求
23// 3. 默认超时 60s，可通过 timeout 修改
24wx.request({
25 url: 'https://api.example.com/data',
26 timeout: 10000,
27 method: 'POST',
28 data: { name: 'test' },
29 header: { 'Authorization': 'Bearer xxx' }
30 success(res) { console.log(res) }
31})
wx.request 是小程序发起网络请求的核心 API。主要参数有：url 请求地址，必须在后台配置合法域名；method 请求方法默认 GET；data 请求参数；header 请求头。三个回调函数：success 成功、fail 失败、complete 无论成败都执行。注意并发上限10个，默认超时60秒。
Promise封装请求
http.js
Promise 封装流程
1// 封装 wx.request 为 Promise
2const request = (options) => {
3 return new Promise((resolve, reject) => {
4 wx.request({
5 ...options,
6 success: (res) => {
7 if (res.statusCode === 200) {
8 resolve(res.data)
9 } else {
10 reject(`请求错误：${res.statusCode}`)
11 }
12 },
13 fail: (err) => reject(err)
14 })
15 })
16}
17
18// 封装常用方法
19const http = {
20 get(url, data) {
21 return request({ url, method: 'GET', data })
22 },
23 post(url, data) {
24 return request({ url, method: 'POST', data })
25 }
26}
27
28// 使用 async/await 调用
29async function loadData() {
30 try {
31 const res = await http.get('/api/list', { page: 1 })
32 console.log(res)
33 } catch (err) {
34 console.error(err)
35 }
36}
37
38module.exports = { http }
将 wx.request 封装为 Promise，可以避免回调地狱。核心是用 new Promise 包裹 wx.request，成功时 resolve，失败时 reject。再封装 get、post 等快捷方法，使用时配合 async/await 让异步代码像同步一样清晰，用 try/catch 统一处理错误。
分页加载与下拉刷新
page-scroll.js
分页加载效果
1Page({
2 data: {
3 list: [],
4 page: 1,
5 pageSize: 10,
6 total: 0,
7 loading: false
8 },
9
10 // 页面加载时获取第一页数据
11 onLoad() {
12 this.getList()
13 },
14
15 // 获取列表数据
16 async getList() {
17 if (this.data.loading) return
18 this.setData({ loading: true })
19 const res = await http.get('/api/list', {
20 page: this.data.page,
21 pageSize: this.data.pageSize
22 })
23 this.setData({
24 list: this.data.list.concat(res.data),
25 total: res.total,
26 loading: false
27 })
28 },
29
30 // 触底加载更多
31 onReachBottom() {
32 if (this.data.list.length >= this.data.total) return
33 this.setData({ page: this.data.page + 1 })
34 this.getList()
35 },
36
37 // 下拉刷新
38 onPullDownRefresh() {
39 this.setData({ list: [], page: 1 })
40 this.getList()
41 wx.stopPullDownRefresh()
42 }
43})
44
45// app.json 中需开启下拉刷新
46// { "enablePullDownRefresh": true }
分页加载是列表页的核心功能。onReachBottom 是页面触底时自动触发的生命周期函数，用于加载下一页数据；onPullDownRefresh 是下拉刷新，需要先在 app.json 中开启。分页逻辑：维护 page 和 pageSize，触底时 page+1 再请求，用 concat 拼接新数据；下拉刷新时重置 page 为1、清空列表再请求，最后调用 wx.stopPullDownRefresh 停止刷新动画。
案例3-3美食列表
shoplist.js
美食列表页面
1// shoplist.js - 美食列表页
2const http = require('../../utils/http')
3
4Page({
5 data: {
6 shopList: [],
7 page: 1,
8 pageSize: 10,
9 total: 0
10 },
11
12 onLoad(options) {
13 this.getShopList()
14 },
15
16 async getShopList(callback) {
17 const res = await http.get('https://api.example.com/shops', {
18 page: this.data.page,
19 pageSize: this.data.pageSize
20 })
21 this.setData({
22 shopList: [...this.data.shopList, ...res.data],
23 total: res.total
24 })
25 callback && callback()
26 },
27
28 onReachBottom() {
29 if (this.data.shopList.length >= this.data.total) {
30 return wx.showToast({ title: '没有更多了', icon: 'none' })
31 }
32 this.setData({ page: this.data.page + 1 })
33 this.getShopList()
34 },
35
36 onPullDownRefresh() {
37 this.setData({ page: 1, shopList: [] })
38 this.getShopList(() => {
39 wx.stopPullDownRefresh()
40 })
41 }
42})
43
44<!-- shoplist.wxml -->
45<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
46 <image src="{{item.image}}" />
47 <view>{{item.name}} - ¥{{item.price}}</view>
48</view>
案例3-3美食列表完整实现了网络请求加分页加载。使用封装好的 http.get 请求数据，onLoad 时加载第一页。触底时 onReachBottom 判断是否还有数据，有则 page+1 继续请求，用展开运算符 [...oldList, ...newList] 拼接数据；没有则提示"没有更多了"。下拉刷新 onPullDownRefresh 重置 page 和列表，请求完成后调用 wx.stopPullDownRefresh。
6
课堂视频
第7次课 · 网络请求与分页加载
本次课教学视频请在课堂现场观看
视频文件较大未随本站发布；如需回看，请向任课教师索取或在课程群下载。
7
教材案例源码
用微信开发者工具「导入项目」打开对应目录即可运行。知识储备是分知识点的最小示例，案例实现／项目实现是完整工程，服务器端是案例配套的后端接口服务。
8
课后实践
基础
完成美食列表
按照案例3-3，完成美食列表的分页加载与下拉刷新功能
进阶
加载状态优化
增加"加载中"提示、到底提示"没有更多数据"、网络错误提示
挑战
请求模块封装
把 wx.request 封装为返回 Promise 的 utils/request.js，统一注入请求头与错误提示，并用 async/await 重写美食列表的分页请求
9
本课小结
wx.request网络请求
Promise封装请求
分页加载与下拉刷新
案例3-3美食列表