uniapp中请求失败的情况如何处理？

在uniapp开发中遇到请求失败的情况应该怎么处理？比如网络错误、接口返回异常或者超时等情况，有没有通用的解决方案或者最佳实践？

2 回复

检查网络状态，设置超时时间，用try-catch捕获错误，根据状态码提示用户，比如网络异常或服务器错误。


在UniApp中处理请求失败的情况，可以通过以下方法进行：

  1. 使用Promise的catch方法
    在发起请求后，通过.catch()捕获错误，并处理网络异常或服务器错误。

    uni.request({
  url: 'https://example.com/api/data',
  method: 'GET',
  success: (res) => {
    console.log('请求成功:', res.data);
  },
  fail: (err) => {
    console.error('请求失败:', err);
    uni.showToast({
      title: '网络请求失败，请重试',
      icon: 'none'
    });
  }
}).catch(error => {
  console.error('捕获异常:', error);
});

  2. 统一封装请求函数
    创建一个公共请求函数，集中处理错误，避免重复代码。

    function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(`请求失败，状态码: ${res.statusCode}`));
        }
      },
      fail: (err) => reject(err)
    });
  });
}

// 使用示例
request({ url: 'https://example.com/api/data' })
  .then(data => console.log(data))
  .catch(error => {
    console.error(error);
    uni.showToast({ title: '请求失败', icon: 'none' });
  });

  3. 处理常见错误类型

    • 网络异常：检查设备网络连接，提示用户检查网络设置。
    • 超时处理：在请求配置中设置timeout，超时时进行重试或提示。
    • 服务器错误：根据HTTP状态码（如500）进行相应处理。

  4. 用户友好提示
    使用uni.showToast或uni.showModal向用户显示错误信息，避免技术性术语。

总结：通过Promise封装、统一错误处理和用户提示，可以有效管理UniApp中的请求失败情况，提升应用稳定性。

回到顶部