跳到主要内容

响应处理

在小程序开发中，网络请求是获取数据的重要手段。当我们发送一个请求后，服务器会返回一个响应。这个响应包含了状态码、响应头和响应体等信息。正确处理这些响应数据是确保小程序正常运行的关键。

1. 响应基础​

1.1 状态码​

状态码是服务器对请求的响应状态的一个数字标识。常见的状态码有：

  • 200: 请求成功。
  • 404: 请求的资源未找到。
  • 500: 服务器内部错误。

在小程序中，我们可以通过 wx.request 的 success 回调函数中的 res.statusCode 来获取状态码。

javascript
wx.request({
  url: 'https://example.com/api/data',
  success(res) {
    console.log('状态码:', res.statusCode);
  }
});

1.2 响应头​

响应头包含了服务器返回的元数据，如内容类型、缓存控制等。我们可以通过 res.header 来访问响应头。

javascript
wx.request({
  url: 'https://example.com/api/data',
  success(res) {
    console.log('响应头:', res.header);
  }
});

1.3 响应体​

响应体是服务器返回的实际数据，通常是一个 JSON 对象。我们可以通过 res.data 来访问响应体。

javascript
wx.request({
  url: 'https://example.com/api/data',
  success(res) {
    console.log('响应体:', res.data);
  }
});

2. 响应处理步骤​

2.1 检查状态码​

在接收到响应后，首先应该检查状态码，以确保请求成功。

javascript
wx.request({
  url: 'https://example.com/api/data',
  success(res) {
    if (res.statusCode === 200) {
      console.log('请求成功:', res.data);
    } else {
      console.error('请求失败:', res.statusCode);
    }
  }
});

2.2 解析响应体​

如果状态码为 200，接下来可以解析响应体。通常响应体是一个 JSON 对象，我们可以直接访问其中的字段。

javascript
wx.request({
  url: 'https://example.com/api/data',
  success(res) {
    if (res.statusCode === 200) {
      const data = res.data;
      console.log('用户ID:', data.userId);
      console.log('用户名:', data.username);
    }
  }
});

2.3 处理错误​

如果状态码不是 200，说明请求可能出现了问题。我们可以根据不同的状态码进行不同的错误处理。

javascript
wx.request({
  url: 'https://example.com/api/data',
  success(res) {
    if (res.statusCode === 200) {
      console.log('请求成功:', res.data);
    } else if (res.statusCode === 404) {
      console.error('资源未找到');
    } else if (res.statusCode === 500) {
      console.error('服务器内部错误');
    } else {
      console.error('未知错误:', res.statusCode);
    }
  }
});

3. 实际案例​

假设我们正在开发一个天气小程序，需要从服务器获取天气数据。我们可以按照以下步骤处理响应：

javascript
wx.request({
  url: 'https://example.com/api/weather',
  success(res) {
    if (res.statusCode === 200) {
      const weatherData = res.data;
      console.log('城市:', weatherData.city);
      console.log('温度:', weatherData.temperature);
      console.log('天气:', weatherData.weather);
    } else {
      console.error('获取天气数据失败:', res.statusCode);
    }
  }
});

在这个案例中，我们首先检查状态码是否为 200，然后解析响应体中的天气数据并显示在页面上。

4. 总结​

响应处理是小程序开发中的重要环节。通过正确处理状态码、响应头和响应体，我们可以确保小程序能够正确地获取和使用服务器返回的数据。在实际开发中，我们应该根据不同的状态码进行相应的处理，并在必要时进行错误处理。

5. 附加资源与练习​

  • 练习: 尝试在小程序中实现一个简单的 API 请求，并处理返回的响应数据。
  • 资源: 查阅 微信小程序官方文档 了解更多关于 wx.request 的详细信息。
提示

在处理响应时，始终记得检查状态码，并根据不同的状态码进行相应的处理。这有助于提高小程序的健壮性和用户体验。