Angularjs package $http.post ()

It did n’t take long to follow a mobile app project, using the ionic+ angularjs + cordova framework, and encountered many problems during the processOne of them is the problem of ajax packaging.

Actually, we haven't stopped talking about the packaging problem.Different projects have different needs,Take a typical example,When I was working on this project, I was criticized because I didn't consider the packaging problem at the beginning.And a friend of mine was criticized for encapsulating ... isn't it embarrassing?

So for whether to encapsulate this problem,How to define it?Actually this is not a very complicated issue,In the final analysis, it is a question of income ratio.If the project is not very large,So it doesn't make much sense to think too much about the packaging itself,Very low returns to the project;For large-scale projects,If not packaged,Then the potential risk is much higher,So the initial investment is also worth it.

Of course, this problem is not something that I can talk about clearly.Today, if you think about encapsulation,So what do I do.

AngularJS provides a service http, which is used to handle Ajax requests. Here I assume that the reader knows angularjs, so go straight to the topic:how to handle encapsulation for post requests.First I need to determine one thing,Can I rule out the individual needs of all users (project team members) (cases that require special handling). If I can't,Then if I can open the interface to restore the post request,So I need an exit to return http.post ().

Secondly, I need to consider how each user handles the results when the response comes.For both success and error situations,I need to provide them with an entry point for processing logic.

Combining the two points above,I probably have an idea,I need to define a service (public service) and provide a mypost method where I allow the consumer to define a callback for the response,And I allow them more freedomGive them the original post (). Fortunately, js is flexible enough,So I can write it like this:

service ("myhttpservice", ["$http", function ($http) {
  var myhttppost=function (url, data, successfn, errorfn) {
  return {
    myhttp:function (url, data, successfn, errorfn) {
      return myhttppost (url, data, successfn, errorfn);

As above, I will return the internally defined method,This method allows users to define successfn and errorfn, which are callbacks for corresponding success and failure,In this way, users can rest assured that the processing logic of pre-written data,No need to care about other details.

In addition, I allow users to get more flexible post (), so I implemented it like this:

var httppromise=$http.post (url, data, {timeout:30000});
if (! angular.isdefined (successfn)) {
  return httppromise;

If the consumer does not define a success callback,Well, this layer of encapsulation is as if it doesn't exist.I will throw out post () and let the caller handle it.And if the caller wants to predefine,I should handle their logic in the encapsulation:

return httppromise.then (
    function (response) {
     if (response.status) {
      return successfn (response);
     } else {
      /* Other processing * /
    },    function (error) {
     if (! angular.isdefined (errorfn)) {
      /* Other processing * /
     } else {
      return errorfn (error);
    },   function () {
    /* Logic that should be executed no matter what the circumstances * /

So the package for http.post () is basically completed.One of them needs attention,If I use angular.isdefined () to determine if the caller has defined a callback when processing successfn,if there is not,I will pass the processing right to the caller,If defined I will handle it for you.The then () method is more interesting,Because the http method returns a promise object, the response can be processed by then () when the response returns.In fact, you can handle callbacks with different response states through promise.success () and promise.error ().But it is better to use then (),Because it receives the complete response object,And success () and error () will parse the response object,The specific differences can be seen through the console output.

The above is a simple package of $http.post (),Although humble,But enough for most situations,And retained a more free approach,Thank you very much friends who discussed with me,Let ’s explore this package together,Achieve a lot,Also hope to all help to other friends.

  • Previous jQuery Ajax asynchronous loading display wait effect code sharing
  • Next Use nodejs to crawl the worry-free front-end skills ranking