[猫头虎分享21天微信小程序基础入门教程]第15天:网络请求与数据交互
自我介绍
大家好,我是猫头虎,一名全栈软件工程师。今天我们继续微信小程序的学习,重点了解如何进行网络请求与数据交互。这些内容将帮助你构建能够与后端服务器通信的小程序,实现数据的动态展示和交互。🚀
基础的网络请求
微信小程序提供了 wx.request
方法,用于发送 HTTP 请求。
一、发送 GET 请求
1. 示例代码
javascript
Page({
data: {
items: []
},
onLoad() {
this.fetchData();
},
fetchData() {
wx.request({
url: 'https://example.com/api/items',
method: 'GET',
success: (res) => {
this.setData({ items: res.data });
},
fail: (err) => {
console.error('Request failed:', err);
}
});
}
});
二、发送 POST 请求
1. 示例代码
javascript
Page({
data: {
newItem: ''
},
addItem() {
wx.request({
url: 'https://example.com/api/items',
method: 'POST',
data: {
name: this.data.newItem
},
success: (res) => {
console.log('Item added:', res.data);
this.setData({ newItem: '' });
this.fetchData(); // 更新列表
},
fail: (err) => {
console.error('Request failed:', err);
}
});
},
handleInput(e) {
this.setData({ newItem: e.detail.value });
}
});
处理请求结果
三、处理响应数据
1. 更新页面数据
在请求成功后,使用 setData
方法更新页面的数据:
javascript
success: (res) => {
this.setData({ items: res.data });
}
四、处理错误
1. 错误处理示例
在请求失败时,可以使用 fail
回调函数处理错误:
javascript
fail: (err) => {
console.error('Request failed:', err);
wx.showToast({
title: '请求失败',
icon: 'none'
});
}
数据交互的优化
五、优化网络请求
1. 使用本地缓存减少请求次数
在进行网络请求前,可以先检查本地缓存,如果缓存中已有数据,则直接使用缓存数据,减少请求次数:
javascript
fetchData() {
const cachedItems = wx.getStorageSync('items');
if (cachedItems) {
this.setData({ items: cachedItems });
} else {
wx.request({
url: 'https://example.com/api/items',
method: 'GET',
success: (res) => {
wx.setStorageSync('items', res.data);
this.setData({ items: res.data });
},
fail: (err) => {
console.error('Request failed:', err);
}
});
}
}
六、分页加载数据
如果数据量较大,可以使用分页加载技术,逐步加载数据:
1. 后端支持分页
后端接口需要支持分页参数:
javascript
// 假设使用 Express 框架
app.get('/api/items', (req, res) => {
const page = parseInt(req.query.page) || 1;
const limit = parseInt(req.query.limit) || 10;
const items = getItemsFromDatabase(page, limit); // 根据分页参数获取数据
res.json(items);
});
2. 前端实现分页加载
javascript
Page({
data: {
items: [],
page: 1,
limit: 10,
hasMore: true
},
onLoad() {
this.fetchData();
},
fetchData() {
if (!this.data.hasMore) return;
wx.request({
url: 'https://example.com/api/items',
method: 'GET',
data: {
page: this.data.page,
limit: this.data.limit
},
success: (res) => {
if (res.data.length < this.data.limit) {
this.setData({ hasMore: false });
}
this.setData({
items: this.data.items.concat(res.data),
page: this.data.page + 1
});
},
fail: (err) => {
console.error('Request failed:', err);
}
});
},
onReachBottom() {
this.fetchData();
}
});
小测试 🧪
- 实现一个能够从服务器获取数据并展示在页面上的小程序。
- 实现分页加载数据,并在用户滚动到底部时加载更多数据。
今日学习总结 📚
概念 | 详细内容 |
---|---|
网络请求 | 使用 wx.request 发送 GET 和 POST 请求 |
处理请求结果 | 更新页面数据,处理请求错误 |
数据交互优化 | 使用本地缓存减少请求次数,分页加载数据 |
结语
通过今天的学习,你应该掌握了如何在小程序中进行网络请求与数据交互。这些技术可以帮助你构建能够与后端服务器通信的小程序,实现数据的动态展示和交互。明天我们将探讨小程序的云开发与数据库操作。如果你有任何疑问,欢迎关注并留言在我的公众号猫头虎技术团队。📩