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

结语

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


相关推荐
码农之王1 小时前
(一)TypeScript概述和环境搭建
前端·后端·typescript
葬送的代码人生1 小时前
React组件化哲学:如何优雅地"变秃也变强"
前端·javascript·react.js
小马虎本人1 小时前
如果接口返回的数据特别慢?要怎么办?难道就要在当前页面一直等吗
前端·react.js·aigc
多啦C梦a1 小时前
从 React 初体验到数据驱动的界面开发:一步步解析 Todo List 组件
javascript·react.js
程序员小刘2 小时前
如何优化React Native应用以适配HarmonyOS5?
javascript·react native·react.js·华为·harmonyos
ALLSectorSorft2 小时前
上门服务小程序会员系统框架设计
小程序·apache
甜甜的资料库4 小时前
基于小程序老人监护管理系统源码数据库文档
微信小程序
海盐泡泡龟4 小时前
“组件、路由懒加载”,在 Vue3 和 React 中分别如何实现? (copy)
前端·javascript·react.js
蚂小蚁5 小时前
从DeepSeek翻车案例看TypeScript类型体操的深层挑战
typescript·deepseek·trae
国家不保护废物6 小时前
🧩 React 组件化进阶:像乐高大师一样搭建你的应用世界!
前端·react.js·ai编程