Taro跨端开发探索6——响应码处理与响应体优化

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

前言

昨天因为时间原因，没有处理res.data的返回多层问题。我们现在后端返回的数据格式为固定的格式，今天我们优化一些resolver res.data问题

step1 优化返回体的data取值

我们现在的后端返回的数据格式如下

private int code;
private String msg;
private T data;
private boolean success;

其中：

• code对应响应码，一般200代表响应成功，500代表服务器异常，401代表资源需要权限，403代表权限验证未通过再加上一些后端自定义的code组成我们的响应码，我们这篇文章以响应码来处理对应的业务弹窗
• msg对应响应信息，一般用来提示较多
• data对应获取到的数据
• success对应是否成功的标识 我们首先优化一下昨天的昨天res.data多层嵌套才能获取最终data的问题，我们修改request.tsx里的request方法如下

function request(url, data, method): Promise<any> {
  return new Promise((resolve, reject) => {
    Taro.request({
      url,
      data,
      method,
      header: {
        "content-type": "application/json"
      }
    }).then(res => {
      if (res.statusCode === 200) {
        resolve(res.data);
      } else {
        reject(res);
      }
    });
  });
}

step2处理后端的响应码

我们这里先拉取一下对应的后端api代码:gitee.com/liangminghu…
之后我们只启动april-article-day-10\

原生异常捕获

这时我们先切换至小程序首页，处理taro原生request的异常信息
在控制台中显示的提示如下

我们可以看到，对应的提示是作为异常抛出的，我们补充一下，在request的then()处理结束后，添加catch捕获异常
代码如下

function request(url, data, method): Promise<any> {
  return new Promise((resolve) => {
    Taro.request({
      url,
      data,
      method,
      header: {
        "content-type": "application/json"
      }
    }).then(res => {
      console.log(res);
      if (res.statusCode === 200) {
        resolve(res.data);
      } 
    }).catch(err=>{
      Taro.showToast({"title": "网络错误,提示:"+err.errMsg,"icon": "none"});
    });
  });
}

后端异常捕获

我们在user的api入口添加几个4010后端服务不存在的uri，在user/index.tsx进行调用
定义api

export const test404 = (code) =>
  post(`${homeReqUrl}/auth/login/aaaBBBccc?code=${code}`, null);

在user/index.tsx头部引入接口然后将调用就放在useEffect入口处就行了
特别说明，下面这个步骤按照自己的需要来处理
我们在访问不存在（404）的路径时，控制台的输出如下

我们在statusCode不等于200时添加判断代码后如下

function request(url, data, method): Promise<any> {
  return new Promise((resolve) => {
    Taro.request({
      url,
      data,
      method,
      header: {
        "content-type": "application/json"
      }
    }).then(res => {
      console.log(res);
      if (res.statusCode === 200) {
        resolve(res.data);
      } else {
        Taro.showToast({"title": "请求失败:"+res.data.error,"icon": "none"});
      }
    }).catch(err=>{
      Taro.showToast({"title": "网络错误,提示:"+err.errMsg,"icon": "none"});
    });
  });
}

后端响应码处理

对于后端返回的异常我们这里有两个处理方法

• 1: 我知道这是异常，但是我会根据success处理，这里我不会reject（我采用的方案）
• 2：我的系统较简单，直接reject处理 如果大家的系统比较简单，可以直接按照第二种来处理就行了，我解释一下为什么我不执行reject操作。 因为
• 1：我们的系统处理的404和401等异常，会返回固定格式的data
• 2：我们有自己的响应码来处理业务，例如返回编码为10001时需要加载页面等 我们在处理异常的时候先添加一个响应码白名单，在响应码白名单里的响应码不会弹窗，最终我们的request/index.tsx代码如下

import Taro from "@tarojs/taro";
const white_res_code = [200, 10001, 10002];
function request(url, data, method): Promise<any> {
  return new Promise((resolve) => {
    Taro.request({
      url,
      data,
      method,
      header: {
        "content-type": "application/json",
      },
    })
      .then((res) => {
        if (res.statusCode === 200) {
          const backEndRes = res.data;
          const resCode = backEndRes.code;
          console.log(backEndRes);
          if (!white_res_code.includes(resCode)) {
            switch (resCode) {
              case 500:
                return Taro.showToast({
                  title: "请求失败,系统异常:" + backEndRes.msg,
                  icon: "none",
                });
              case 401:
                return Taro.showToast({
                  title: "请求失败,请您登陆:" + backEndRes.msg,
                  icon: "none",
                });

              case 403:
                return Taro.showToast({
                  title: "请求失败,暂无权限:" + backEndRes.msg,
                  icon: "none",
                });

              default:
                return Taro.showToast({
                  title: "请求失败:" + res.data.error,
                  icon: "none",
                });
            }
          } else {
            resolve(backEndRes.data);
          }
          resolve(res.data);
        } else {
          Taro.showToast({ title: "请求失败:" + res.data.error, icon: "none" });
        }
      })
      .catch((err) => {
        Taro.showToast({ title: "网络错误,提示:" + err.errMsg, icon: "none" });
      });
  });
}
function get(url) {
  return request(url, null, "GET");
}

function post(url, data) {
  return request(url, data, "POST");
}
function del(url) {
  return request(url, null, "DELETE");
}
function put(url, data) {
  return request(url, data, "POST");
}
export { get, post, del, put };

其他代码大家可以访问我的git查看一下4月12日的修改记录就可以了

结语

今天我们处理了response的响应体优化与不同的响应code处理，我们已经完成了code的白名单，明天我们丰富一下请求路径的白名单，优化获取token和实现登录拦截的功能
本文的代码地址在:gitee.com/liangminghu… 欢迎大家多多关注