微信小程序获取后端数据

在小程序中获取后端接口数据

通常可以使用 wx.request 方法，以下是一个基本示例：

// pages/index/index.js
Page({
   
  data: {
   
    // 用于存储后端返回的数据
    resultData: [] 
  },
  onLoad() {
   
    this.fetchData();
  },
  fetchData() {
   
    wx.request({
   
      url: 'https://your-backend-api-url.com/api', // 替换为真实的后端接口地址
      method: 'GET', // 请求方法，可以是 POST、PUT、DELETE 等，按需修改
      success: (res) => {
   
        if (res.statusCode === 200) {
   
          this.setData({
   
            resultData: res.data 
          });
        } else {
   
          console.error('请求失败', res);
        }
      },
      fail: (err) => {
   
        console.error('网络请求出错', err);
      }
    });
  }
});

在上述代码中：

• onLoad 生命周期钩子函数在页面加载时被触发，它调用 fetchData 函数。
• fetchData 函数发起网络请求，wx.request 的 url 参数指定后端接口地址，method 设定请求方式。当请求成功（success 回调被触发），如果状态码是 200，就把后端返回的数据通过 setData 方法更新到页面的 data 中，后续就可以在页面的 wxml 模板里使用这些数据进行展示；如果请求失败，fail 回调里会打印错误信息。

如果涉及到传递参数、鉴权等复杂情况：

• 传递参数：假如是 POST 请求，需要向接口传递数据，就在 wx.request 里添加 data 字段，例如：

wx.request({
   
  url: 'https://your-backend-api-url.com/api',
  method: 'POST',
  data: {
   
    key1: 'value1',
    key2: 'value2'
  },
  success: (res) => {
   
    //...处理逻辑
  },
  fail: (err) => {
   
    //...处理逻辑
  }
});

• 鉴权：若后端接口需要身份验证，常见做法是在请求头里添加 Authorization 字段携带 token，例如：

wx.request({
   
  url: 'https://your-backend-api-url.com/api',
  method: 'GET',
  header: {
   
    'Authorization': 'Bearer your-token-here'
  }