如何在微信小程序中处理后端接口返回的错误？

在微信小程序中处理后端接口返回的错误可以从以下几个方面进行：

一、检查返回状态码

1. 当调用后端接口后，首先检查返回的 HTTP 状态码。常见的状态码如 200 表示成功，400 表示客户端错误（如参数错误），401 表示未授权，403 表示禁止访问，500 表示服务器内部错误等。

   • 在 wx.request()的回调函数中，可以通过判断 res.statusCode来确定状态码并进行相应处理。

   wx.request({
     //...
     success: (res) => {
       if (res.statusCode === 200) {
         // 处理成功的情况
       } else {
         // 处理错误状态码的情况
         switch (res.statusCode) {
           case 400:
             wx.showToast({
               title: '参数错误',
               icon: 'none'
             });
             break;
           case 401:
             wx.showToast({
               title: '未授权，请登录',
               icon: 'none'
             });
             break;
           // 处理其他状态码的情况
         }
       }
     },
     fail: (err) => {
       // 处理网络请求失败的情况
       wx.showToast({
         title: '网络错误，请稍后重试',
         icon: 'none'
       });
     }
   });
   

二、解析错误信息

1. 后端接口通常会在响应体中返回具体的错误信息。如果是 JSON 格式的响应，可以检查是否有特定的错误字段。

   • 例如，后端可能返回 { "error": "用户名已存在" }这样的错误信息。可以通过 res.data.error来获取错误内容并进行针对性的提示。

   wx.request({
     //...
     success: (res) => {
       if (res.statusCode === 200) {
         // 处理成功的情况
       } else {
         if (res.data && res.data.error) {
           wx.showToast({
             title: res.data.error,
             icon: 'none'
           });
         } else {
           // 无法识别的错误情况
           wx.showToast({
             title: '未知错误',
             icon: 'none'
           });
         }
       }
     },
     fail: (err) => {
       // 处理网络请求失败的情况
       wx.showToast({
         title: '网络错误，请稍后重试',
             icon: 'none'
       });
     }
   });
   

三、全局错误处理

1. 可以创建一个全局的错误处理函数，在各个页面或模块中调用这个函数来统一处理后端接口错误。

   • 创建一个名为 handleError的函数，接收错误信息作为参数，并进行统一的错误提示或其他处理逻辑。

   function handleError(error) {
     if (typeof error === 'string') {
       wx.showToast({
         title: error,
         icon: 'none'
       });
     } else if (error.response && error.response.data && error.response.data.error) {
       wx.showToast({
         title: error.response.data.error,
         icon: 'none'
       });
     } else {
       wx.showToast({
         title: '未知错误',
         icon: 'none'
       });
     }
   }
   

   然后在调用后端接口的地方，在错误处理中调用这个函数：

   wx.request({
     //...
     fail: (err) => {
       handleError(err);
     }
   });
   

四、错误日志记录

1. 为了便于排查问题，可以将错误信息记录下来。可以使用小程序的日志功能或者将错误信息发送到后端服务器进行记录。

   • 使用 console.error()记录错误信息到开发者工具的控制台。

   wx.request({
     //...
     fail: (err) => {
       console.error('接口调用错误：', err);
       handleError(err);
     }
   });