Question

我正在开发一个Web系统，但对Angular JS来说还是一个新手。

我正在处理的功能当前需要使用Angular进行POST调用。这在Angular中并不难做到。但我想继续阅读插座。

我正在进行的通话需要很长时间（按预期），但我希望调用的状态在我的Angular应用中可见。所以我想将状态发回数据，并在我的应用中实时显示。

最好的方法是什么？我找到了Angular的WebSocket演示，但在这种情况下，我必须在WebSockets上创建自己的HTTP实现才能发送POST请求.....

Answer 1

使用$http服务的HTTP请求在后台进行，因此您可以在实际发出请求时显示所需内容。要了解请求的状态，取决于您希望如何衡量该状态。

$http对象上的进度事件不会被添加到Angular until 1.6中，因此如果延迟与大文件上传有关，则可能需要创建一个包装原始文件的服务XMLHttpRequest对象，而不是$http。这是一个例子来自the MDN docs：

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress);
oReq.addEventListener("load", transferComplete);
oReq.addEventListener("error", transferFailed);
oReq.addEventListener("abort", transferCanceled);

// progress on transfers from the server to the client (downloads)
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

如果延迟是服务器端 - 等待长时间运行的数据库查询，例如，您可能只想根据查询的平均运行时伪造进度表或显示不确定的条：

听起来你似乎有办法监控服务器端的进度。在这种情况下，您可以在第一个请求进行另一个请求时获取进度信息。您可能需要发送一些状态（如查询ID或请求ID）来关联这两个请求。

Answer 2

.prototype

Answer 3

你可以使用拦截器。每当你进行http调用时，这将在发送之前和从服务器返回后拦截调用。

$httpProvider.interceptors.push(['$q', '$location', 'localStorageService', function ($q, $location, localStorageService) {
        return {
            request: function (config) {
                // You can do some stuff here

                return config;
            },

            response: function (result) {
                return result;
            },

            responseError: function (rejection) {
                console.log('Failed with', rejection.status, 'status');


                return $q.reject(rejection);
            }
        }
    }]);

或者您可以使用https://github.com/McNull/angular-block-ui

Answer 4

你可以使用$ HTTP创建一个自定义服务来执行这样的POST请求：

site.factory('customService', ['$http', function($http){
     var httpProto = {
         success : function(response, status, headers, config) {
            return response;
         },
         error :  function(error, status, headers, config) {
            return error;
         }
      };

      thePostRequest: function(dataRequest){
         var output = $http.post(
               'http://74.125.224.72/',
                dataRequest
         );

         output.prototype = httpProto;
         return output;
      }
}

Answer 5

对于网络套接字，朋友将我指向了socket.io，并且我在几个SPA中成功地将它们用于Angular。查看this material了解详情。

G00d 1uck。

继续阅读Angular JS HTTP调用

5 个答案: