Detailed example of AngularJS encapsulation $http.post()

This article mainly introduces AngularJSRelevant information about encapsulating $http.post() examples in detail. Friends in need can refer to

AngularJS encapsulating $http.post () Detailed explanation of examples

It took me a short time to follow a mobile APP project, using ionic + AngularJS + cordovaframework, during which I encountered many problems , one of which is the encapsulation issue of Ajax.

In fact, we have never stopped talking about the issue of packaging. Different projects also have different needs. To give a typical example, when I was working on this project, I did not consider the issue of packaging at the beginning. was criticized, and a friend of mine was criticized for encapsulation... It's embarrassing, isn't it?

So how to define the issue of whether to encapsulate? In fact, this is not a very complicated issue. In the final analysis, it is a question of income ratio. If the project scale is not very large, then it is meaningless to consider the packaging issue too much. The income for the project is extremely low; and for large-scale projects, it is meaningless. That said, if there is no encapsulation, the potential risks are much higher, so the initial investment is worth it.

Of course, this issue is not something that a novice like me can explain clearly. Today I will talk about how I would deal with it if encapsulation is considered.

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 post requests Encapsulation. First of all, I need to determine one thing, whether I can exclude the personalized needs (situations that require special handling) of all users (project team members). If I can't, then I should open the interface to restore the post request, so I need an outlet to return http.post().

Second point, 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 entrance to the processing logic.

Based on the above two points, I roughly have an idea. I need to define a service (public service) and provide a myPost method, in which I allow users to define response callbacks, and I allow them Get more freedom and give them a pristine 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 the user to define successFn and errorFn, which are the corresponding callbacks for success and failure, so Users can safely pre-write data processing logic without worrying about other details.

In addition, I allow users to get a more flexible post(), then I implement it like this:

var httpPromise = $http.post(url, data, {timeout: 30000});
if (!angular.isDefined(successFn)) {
  return httpPromise;
}

If the user does not define a success callback, okay, As if this layer of encapsulation does not exist, I will throw out post() and let the caller handle it. And if the caller wants to define it in advance, I should handle their logic in the encapsulation:

return httpPromise.then(
    function (response) {
     if (response.status) {
      return successFn(response);
     } else {
      /*其他处理*/
     }
    },
    function (error) {
     if (!angular.isDefined(errorFn)) {
      /*其他处理*/
     } else {
      return errorFn(error);
     }
    },
   function () {
    /*无论何总情况下都应该被执行的逻辑*/
   }
)

In this way, the encapsulation of http.post() is basically completed . There is one thing that needs to be noted. If I use angular.isDefined() when processing successFn to determine whether the callback has been defined by the caller, if not, I will hand over the processing rights to the caller. If it has been defined, I will handle it on my behalf. . The then() method is more interesting, because the http method returns a promise object. When the response is returned, the response can be processed through then(). In fact, it can be processed through promise.success() and promise. error() handles callbacks of different response states, but then() is better because it receives a complete response object, while success() and error() will parse the response object. The specific differences are as follows: You can see it through the console output.

The above is my simple encapsulation of $http.post(). Although it is simple, it is enough to cope with most situations and retains a more free processing method. Thank you very much for discussing with me. Friends, I have learned a lot from discussing this packaging together, and I hope it can be helpful to other friends.

The above is the detailed content of Detailed example of AngularJS encapsulation $http.post(). For more information, please follow other related articles on the PHP Chinese website!