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

猫头虎

发布于 2024-05-28 08:11:52

930

发布于 2024-05-28 08:11:52

文章被收录于专栏：用户11053981的专栏用户11053981的专栏

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

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天我们继续微信小程序的学习，重点了解如何进行网络请求与数据交互。这些内容将帮助你构建能够与后端服务器通信的小程序，实现数据的动态展示和交互。🚀

基础的网络请求

微信小程序提供了 wx.request 方法，用于发送 HTTP 请求。

一、发送 GET 请求

1. 示例代码

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. 示例代码

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 方法更新页面的数据：

success: (res) => {
  this.setData({ items: res.data });
}

四、处理错误

1. 错误处理示例

在请求失败时，可以使用 fail 回调函数处理错误：

fail: (err) => {
  console.error('Request failed:', err);
  wx.showToast({
    title: '请求失败',
    icon: 'none'
  });
}

数据交互的优化

五、优化网络请求

1. 使用本地缓存减少请求次数

在进行网络请求前，可以先检查本地缓存，如果缓存中已有数据，则直接使用缓存数据，减少请求次数：

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. 后端支持分页

后端接口需要支持分页参数：

// 假设使用 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. 前端实现分页加载

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