AngularJS中通过Promise处理登录API 503状态码的错误提示需求

我看到你想在登录接口返回503状态码时展示提示信息，但目前catch块里的error对象存在异常问题。咱们先拆解下当前代码的问题，再一步步调整。

问题分析 #

当前的authenticate函数里，catch块只是简单把错误reject出去，没有针对503状态码做特殊处理；另外可能你遇到的error对象结构和预期不符，导致无法正确识别状态码，这也是异常的根源之一。

解决方案 #

我们可以在catch块里先判断错误的HTTP状态码，当状态码是503时添加提示逻辑（比如用alert或者项目里的全局提示组件），之后再根据需求决定是否继续传递错误。

修改后的代码如下：

function authenticate(user) {
  var req = { 
    method: "POST", 
    url: baseurl + "login", 
    data: user // 这里注意你原代码里的`data`变量大概率是笔误，应该传入函数参数`user`
  };
  return $http(req)
    .then(function(response) {
      if (response.data.access_token) {
        setUserInfo(user, response.data.access_token);
        return response.data;
      } else {
        return $q.reject({ message: "登录失败，未获取到身份令牌" });
      }
    })
    .catch(function(error) {
      // 先判断是否是503服务不可用状态
      if (error.status === 503) {
        // 这里替换成你项目中实际使用的提示方式，比如全局弹窗、toast等
        alert("服务暂时不可用，请稍后再尝试登录");
      }
      // 继续传递错误，方便上层逻辑做额外处理
      return $q.reject(error);
    });
}

额外注意点 #

• AngularJS的$http返回的错误对象中，status属性就是HTTP响应状态码，直接通过它判断即可。如果你的错误对象被封装过，可以先打印console.log(error)确认结构后再调整判断逻辑。
• 提示部分尽量用项目统一的UI组件，别用原生alert，保持体验一致性。
• 原代码里的data: data大概率是笔误，改成data: user才能正确把用户登录信息传入请求。

内容的提问来源于stack exchange，提问作者Neha Gupta