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

结语

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


相关推荐
编程千纸鹤3 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
说私域4 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo4 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v4 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
一颗松鼠6 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
新星_6 小时前
函数组件 hook--useContext
react.js
阿伟来咯~7 小时前
记录学习react的一些内容
javascript·学习·react.js