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

结语

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


相关推荐
web_Hsir6 分钟前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
PBitW1 小时前
微信小程序 -- 原生封装table
前端·微信小程序
低代码布道师1 小时前
加油站实战小程序04今日油价
低代码·小程序
ml130185288741 小时前
DeepSeek 助力心理医生小程序赋能!心理咨询小程序 线上咨询平台搭建
java·开发语言·小程序
小满zs2 小时前
React-router v7 第一章(安装)
前端·react.js
阿丽塔~2 小时前
React.memo()和 useMemo()的用法是什么,有哪些区别
前端·javascript·react.js
oil欧哟3 小时前
😎 MCP 从开发到发布全流程介绍,看完不踩坑!
人工智能·typescript·node.js
大叔_爱编程4 小时前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
关山月4 小时前
6 个常见的 React 反模式,正在损害你的代码质量
react.js
天下代码客4 小时前
【八股】介绍Promise(ES6引入)
前端·ecmascript·es6