首页 > 代码库 > angular使用工厂模式封装公用的 ajax 异步交互

angular使用工厂模式封装公用的 ajax 异步交互

在开发过程中,我们会不可避免的用到 ajax 交互,每一个都需要写 $http,然而写多了会发现,这个维护性不高,而且重复的代码太多,不适合进行快速开发。

  比如这样:

  $http({

     url:"test.php",

     method:"POST",

     data:JSON.stringify({name:"tao"}),

     headers:{"Content-Type":"application/json"}

  }).then(function(data){

  }),function(err){

  }

当你的项目够大的时候,你会发现,经常这样写会很烦恼,有很多重复的代码。导致项目维护困难,那么用工厂模式是怎么解决的呢?

看代码

app.factory("http",function($http,$q){//注入http服务,$q 的promise;

var obj={};

obj.ajax=function(method,url,data){

  var promise=$q.defer();//取到promise,promise是个比较高级的api,jQuery和各大框架都有,ES5没有这个概念,在ES6当中已经存在了

  $http({

     url:url,

     method:method,

     data:JSON.stringify(data),

     headers:{"Content-Type":"application/json"}

  }).then(function(data){

  promise.resolve(data)

  }),function(err){

  promise.reject(err)

  }

return promise.promise;

}

return obj;

})

这个工厂服务的代码就完成了。

只要在controller中注入这个服务"http"就可以使用了,

调用代码

.controller(‘myctrl‘,[‘$scope‘,‘http‘,function($scope,http){

  http.ajax(‘get‘,‘test.php‘).then(function(data){

  //data就是获取到的数据了

})

}])

写的不好,请见谅。

angular使用工厂模式封装公用的 ajax 异步交互