[猫头虎分享21天微信小程序基础入门教程]第15天:网络请求与数据交互

[猫头虎分享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 请求
处理请求结果 更新页面数据,处理请求错误
数据交互优化 使用本地缓存减少请求次数,分页加载数据

结语

通过今天的学习,你应该掌握了如何在小程序中进行网络请求与数据交互。这些技术可以帮助你构建能够与后端服务器通信的小程序,实现数据的动态展示和交互。明天我们将探讨小程序的云开发与数据库操作。如果你有任何疑问,欢迎关注并留言在我的公众号猫头虎技术团队。📩


相关推荐
Stanford_11065 分钟前
关于大数据的基础知识(二)——国内大数据产业链分布结构
大数据·开发语言·物联网·微信小程序·微信公众平台·twitter·微信开放平台
超级土豆粉17 分钟前
JavaScript 标签加载
开发语言·javascript·ecmascript
代码搬运媛28 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
EndingCoder1 小时前
React Native 开发环境搭建(全平台详解)
javascript·react native·react.js·前端框架
Moment1 小时前
为什么我在 NextJs 项目中使用 cookie 存储 token 而不是使用 localstorage
前端·javascript·react.js
F_Director1 小时前
傻子都能理解的 React Hook 闭包陷阱
前端·react.js·源码阅读
陈进Coding1 小时前
踩坑记录【一】 - String与bytes 的转换
typescript
前端小白从0开始2 小时前
关于前端常用的部分公共方法(二)
前端·vue.js·正则表达式·typescript·html5·公共方法
邹荣乐3 小时前
uni-app开发微信小程序的报错[渲染层错误]排查及解决
前端·微信小程序·uni-app
南方kenny3 小时前
React组件化实战:从零打造智能TodoList清单
前端·react.js·aigc