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

结语

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


相关推荐
qq_17448285751 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502771 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
红绿鲤鱼4 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo4 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
周三有雨4 小时前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript
loey_ln6 小时前
FIber + webWorker
javascript·react.js
zhenryx6 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
licy__8 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
zongzi_4948 小时前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript