微信小程序开发教学系列（5）- API调用与网络请求

第五章：API调用与网络请求

5.1 调用微信提供的API接口

小程序>微信小程序提供了丰富的API接口，用于实现各种功能。你可以通过全局对象wx直接调用这些API接口，无需额外导入模块。

下面是调用API接口的基本步骤：

直接调用API方法：使用wx对象调用对应的API方法，例如：
```
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
});
```
这里调用了showToast方法，显示一个成功的提示框。

处理API回调：大部分API接口都是异步的，需要通过回调函数处理返回结果，例如：

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(res) {
    console.log(res.data);
    // 处理返回的数据
  },
  fail: function(err) {
    console.error(err);
    // 处理请求失败的情况
  }
});

这里调用了request方法，发送一个GET请求，并在成功回调中打印返回的数据，失败回调中打印错误信息。

5.2 发送网络请求获取数据

在小程序中，你可以使用小程序提供的wx.request方法发送网络请求来获取数据。下面是发送GET请求并处理返回数据的示例代码：

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(res) {
    console.log(res.data);
    // 处理返回的数据
  },
  fail: function(err) {
    console.error(err);
    // 处理请求失败的情况
  }
});

在上面的示例中，我们通过url参数指定了请求的API接口地址，使用GET方法发送请求。成功时，返回的数据将会在回调函数的res参数中，你可以根据接口返回的数据进行相应的处理。如果请求失败，错误信息将会在回调函数的err参数中。

5.3 处理异步请求和数据渲染

由于网络请求是异步的操作，你需要在请求成功后才能获取到数据并进行相应的处理和渲染。在小程序中，你可以使用数据绑定和setData方法来实现数据的动态渲染。

下面是一个示例，演示了如何发送网络请求获取数据，并将数据渲染到页面上的列表中：

Page({
  data: {
    dataList: [] // 初始数据为空
  },
  onLoad: function() {
    // 发送网络请求获取数据
    wx.request({
      url: 'https://api.example.com/data',
      method: 'GET',
      success: function(res) {
        // 请求成功后，```javascript
        // 更新页面数据
        this.setData({
          dataList: res.data
        });
      },
      fail: function(err) {
        console.error(err);
      }
    });
  }
});

在上面的示例中，我们在页面的onLoad生命周期函数中发送网络请求并获取数据。成功后，使用setData方法将获取到的数据更新到dataList变量中，从而触发页面的重新渲染。

在页面的wxml文件中，你可以使用数据绑定和列表渲染语法来将数据渲染到页面上：

<view class="list">
  <block wx:for="{{dataList}}" wx:key="index">
    <view class="item">{{item.title}}</view>
  </block>
</view>

在上面的示例中，我们使用wx:for指令遍历dataList数组，并将每一项的title属性渲染到页面上的列表项中。

通过以上步骤，你可以成功发送网络请求获取数据，并将数据渲染到页面上的列表中。

小结

本章介绍了如何调用微信提供的API接口来实现各种功能，并使用wx.request方法发送网络请求获取数据。通过处理异步请求和数据渲染，你可以将获取到的数据动态地展示在小程序的页面上。

tips：网络请求部分在后续实战项目章节中我们会有更加具体且丰富的示例内容，这里便不做太多详细的贴图示例了