angularjs - 在 Angular JS 中实现 $http 的最佳方法？

Question

在 Angular JS 中使用 $http 服务的最佳方法是什么？我们如何才能实现承诺范式并做到最好任何帮助将不胜感激。

我浏览了 API 开发人员指南，发现了以下内容。

 $http.get(url)

我想知道 promise 调用会是什么样子，我如何将回调函数附加到这个？

Answer 1

任何对 $http 的调用都会返回一个 Promise 对象，因此您可以像这样调用成功方法或错误：

$http.get("/url").success(function(data){ 

})
.error(function(errorData, errorStatus){

})

或者你可以这样做：

var promise = $http.get("/url");

promise.success(...)

确保您阅读了有关$resource、$q和$http以涵盖“角度”方式。

Answer 2

实现回调的最佳方法是这样的

  $http(url).then( function (){
      return //values
   })

现在，如果您想实现 Promise 范式，您需要在控制器中进行解析配置

resolve: {
   value1: return $http.get(url).then( function (response){
      if(response)
         return response.data['value'];
  })
  }

Answer 3

标准方式（工业）

创建一个js文件夹。在此文件夹中，创建另一个文件夹名称它utils。

由于 $http 请求将被多次发出，因此最好将其分开保存。制作一个 AngularJS 工厂文件并将其命名为 jsonLoader.js。

jsonLoader.js：

app.factory("jsonLoader",function($http,$q){
   var object={
    loadJson(json){
        var defer=$q.defer();
//json url of ur data
        var jsonUrl="http://localhost:3000/jsonData/"+json+".json";

        $http.get(jsonUrl).then(function(resolveData){
            defer.resolve(resolveData);//recivedData  
        },
        function(rejectedError){
            console.log("Rejected error from jsonLoader ",rejectedError);
        }
        );
        return defer.promise;
    }
   }
   return object;
});

现在在你的控制器中注入这个工厂，如下所示：

app.controller("mainController",function($scope,mainFactory,jsonLoader){
    $scope.loadNavMenu=()=>{
        console.log("controller");
        var promise =jsonLoader.loadJson('navMenu');
        promise.then(function(recivedData){
            console.log("Data is ",recivedData.data);
//callback function here or some data binding 
            $scope.menuItems=recivedData.data.menuItems;
        }); 
    }
}