使用 AngularJS $http 处理状态 304 响应答案

【问题标题】：Handle Status 304 response with AngularJS $http使用 AngularJS $http 处理状态 304 响应
【发布时间】：2018-02-05 07:22:33
【问题描述】：

如果我有一个 API 服务器，那么 API 会发送 JSON 格式的 ajax 数据：

{"status":304,"message":"Cannot delete data where PK is empty or > 1"}

如何在 AngularJS $http post 调用状态和消息来提醒 bootbox？这是我的 AngularJS $http 帖子

$http({
  method: "POST",
  url: apiUrl('disable_assethw'),
  data: {
    id: id
  },
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(function successCallback(response) {
  if(response.status == 304) {
    bootbox.alert("Something went error.." + response.data.message);
  } else {
    $scope.getAssetHW();
  }
}, function errorCallback(response) {
  bootbox.alert("Something went error.." + response.status);
});

感谢您的建议。

【问题讨论】：

你说它的 json 在这里你提到{'Content-Type': 'application/x-www-form-urlencoded'}
除非你改变了默认的requestTransformer，否则{id: id}肯定不是application/x-www-form-urlencoded请求的有效载荷
等等，您问题顶部的 JSON 是来自服务器的响应负载吗？如果是这样，你想要if (response.data.status == 304)
抱歉内容类型，我的意思是。如何在 jquery 上调用 {"status":304,"message":"Cannot delete data where PK is empty or > 1"} like success 属性。对不起我的英语不好
感谢您的帮助，我找到了我的解决方案，就像你说的那样打电话@phil response.data.status / message。然后我清除缓存我的浏览器和陷阱，警报显示。谢谢大家。

标签： javascript angularjs angularjs-http

【解决方案1】：

你说这是 json 响应并且你使用了： application/x-www-form-urlencoded ，这是错误的。

处理 rest/api 调用的最佳做法是：

创建 1 个可在整个应用程序中访问的通用/通用函数，用于管理您的后 api 调用（将 api 响应添加到回调）：

postAPICall(url, body, data) {
    let headers = new Headers({'Content-Type': 'application/json'});
    this.http
        .post(url,
            body, {
                headers: headers
            })
        .map(
            response => response.json())
        .subscribe(
            response => {
                data(response);
            },
            err => data(this.handleError(err)); //handle error here
        );
}

在需要的地方调用这个函数（在组件或服务中）：

var yourJSONBody = {
    "param-1": "",
    "param-2": "",
    //....
    }
}

this.myCommonService.postAPICall("localhost:8080/app/", yourJSONBody, data => {
    if (data.status == "304") {
        //do stuff
        //this.msgs.push({severity: 'error', detail: data.message});
    }
    else {
        //do stuff
    }
});

错误处理函数：

private handleError(error: any) {
    let description = 'There was an error: ' + error.status;
    let errors = {
        errorcode: error.status,
        errorstatus: error.statusText,
        errordescription: description
    };
    return errors;
}

【讨论】：

如果您遇到任何问题或错误，或者我遗漏了什么，请告诉我。
您的答案使用 Angular 2+ http API。问题是针对 AngularJS $http Service

【解决方案2】：

当使用 JavaScript 对象作为数据进行 POST 请求时，使用 AngularJS 默认的内容类型（自动设置为 application/json）。 $http service 还会自动将 JavaScript 对象编码为 JSON strings。

只有状态在 200-299 范围内的响应才会被成功处理程序处理。超出范围的状态由拒绝处理程序处理：

$http({
  method: "POST",
  url: apiUrl('disable_assethw'),
  data: {
    id: id
  },
  headers: {
    ̶'̶C̶o̶n̶t̶e̶n̶t̶-̶T̶y̶p̶e̶'̶:̶ ̶'̶a̶p̶p̶l̶i̶c̶a̶t̶i̶o̶n̶/̶x̶-̶w̶w̶w̶-̶f̶o̶r̶m̶-̶u̶r̶l̶e̶n̶c̶o̶d̶e̶d̶'̶
  }
}).then(function successCallback(response) {
  ̶i̶f̶(̶r̶e̶s̶p̶o̶n̶s̶e̶.̶s̶t̶a̶t̶u̶s̶ ̶=̶=̶ ̶3̶0̶4̶)̶ ̶{̶
    ̶b̶o̶o̶t̶b̶o̶x̶.̶a̶l̶e̶r̶t̶(̶"̶S̶o̶m̶e̶t̶h̶i̶n̶g̶ ̶w̶e̶n̶t̶ ̶e̶r̶r̶o̶r̶.̶.̶"̶ ̶+̶ ̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶.̶m̶e̶s̶s̶a̶g̶e̶)̶;̶
   ̶}̶ ̶e̶l̶s̶e̶ ̶{̶
    $scope.getAssetHW();
  ̶}̶
}, function errorCallback(response) {
  //HANDLE 304 status HERE
  if(response.status == 304) {
    bootbox.alert("Something went error.." + response.data.message);
  } else {
    bootbox.alert("Something went error.." + response.status);
  };
});

来自文档：

200 到 299 之间的响应状态代码被视为成功状态，将导致调用成功回调。超出该范围的任何响应状态代码都被视为错误状态，并将导致调用错误回调。此外，小于 -1 的状态代码被归一化为零。 -1 通常意味着请求被中止。

— AngularJS $http Service API Reference

注意：状态为-1 通常表示浏览器拒绝了带有违反same-origin policy 的CORS problem 的请求。

【讨论】：