Angular 서비스 Request 비동기 요청 의 인 스 턴 스 설명

우선 여기 제 가 간단하게 예 를 써 서 당신 의 이 해 를 편리 하 게 하 겠 습 니 다.

var request = {
  post: function() {
    var errorCallback = {
      error: function(f) {
        this.fun = f;
      },
      fun: function(data) {}
    };
    successCallback = {
      success: function(f) {
        return this.fun = f, console.log(this.fun), errorCallback;
      },
      fun: function(data) {
        console.log(data)
      }
    };
    returnData = {
      wsscat: "hello"
    };
    //  
    //var a = successCallback.fun(returnData);
    a = successCallback.fun;
    setTimeout('a(returnData)', 1000)
    return successCallback;
    }
    }
    request.post().success(function(data) {
      console.log("123");
      console.log(data);
    })
    console.log("wscat's test");

여기 서 먼저 이해 해 야 할 것 은 바로 비동기 반전 이다.자바 script 의 비동기 반전 은 사실은 두 가지 상용 방법 이다.
setTimeout 정시 클래스 와 aax 요청 클래스
위의 코드 는 angular 의 request 서비스 와 유사 합 니 다.우선 이 request 대상 은 angular 가 request 서 비 스 를 주입 한 후에 돌아 오 는 request 대상 에 해당 합 니 다.
이 대상 은 post 방법 을 썼 고 post 방법 에는 두 개의 반전 대상 이 있 습 니 다.

errorCallback successCallback 

아 날로 그 ajax 가 되 돌려 달라 고 요청 한 returnData 대상 도 있 습 니 다.

returnData = {
      wsscat: "hello"
    };

이 건 angular 에 서 는 ajax 요청 서버 가 당신 에 게 돌아 온 json 대상 입 니 다.
이 코드 가 실 행 된 후에 로그 에서 어떤 정보 가 나 오 는 지 보 겠 습 니 다.다음 그림 입 니 다.

자 바스 크 립 트 에 익숙 하 다 면 이해 하기 어렵 지 않 습 니 다.우선 출력 된 함수 정 보 는 success()함수 에 있 는 console.log(this.fun)라 는 말 때 문 입 니 다.

request.post().success() 

success()에서 먼저 this.fun=f 는 익명 의 리 셋 함 수 를 successCallback 대상 에 게 부여 하 는 fun 방법 입 니 다.저장 하여 뒤의 setTimeout 을 리 셋 합 니 다.
그래서 우 리 는 먼저 인쇄 된 리 셋 함수,그 다음 에 코드 의 마지막 문장 을 실행 하 는 것 을 볼 수 있다.

console.log("wscat's test"); 

이 절 차 를 알 게 되면 angular 패키지 의 request 서비스 라 는 부분 을 잘 이해 할 수 있 습 니 다.
단지 angular 안의 리 셋 은 setTimeout 리 셋 이 아니 라$http 리 셋 으로 바 뀌 었 을 뿐 입 니 다.

$http.get(url).success(function(data, status, headers, config) {
//code
})

$http 요청 은 되 돌아 오 는 성공 이나 실패 에 따라 데 이 터 를
익명 리 셋 함수 로 덮어 쓰 고 대상 successCallback 의 fun 에 해당 하 는 방법 으로 가 져 왔 습 니 다.
fun 에 데 이 터 를 넣 으 면 다음 두 마디 입 니 다.

successCallback.fun(returnData); 
errorCallback.fun(returnData); 

뒤에 제 가 좀 더 깊이 얘 기 할 게 요.

$http.get(url).success(function(data, status, headers, config) {
//code
})

data:이 건 더 이상 설명 할 필요 가 없습니다.우리 위 에서 이렇게 많이 했 는데 사실은 서버 를 우리 에 게 되 돌려 주 려 는 data 입 니 다.
status:http 응답 상태 코드,이것 은 매우 기본 적 인 것 이지 만,나 는 간단하게 말 하 겠 습 니 다.
200:의심 하지 마 세 요.성공 을 청 한 다 는 뜻 이에 요.
304:당신 이 요청 한 것 이 허락 된 상황 에서 서버 에서 당신 이 필요 로 하 는 것 이 여전히 이전 과 같 지 않다 는 것 을 발견 하면 304 로 되 돌려 줍 니 다.
404:요청 이 실 패 했 습 니 다.요청 한 자원 을 서버 에서 찾 을 수 없습니다.
500:5 를 보면 보통 서버 오류 가 발생 합 니 다.
자주 보 는 건 이 정도 밖 에 없어 요.
헤더 정보
config:원본 요청 의 설정 대상 을 생 성 합 니 다.다음 그림 입 니 다.

다시 아래 를 보면 사실 post 요청 과 get 요청 의 차이 가 크 지 않 습 니 다.
다만 여기 get 은 더욱 간단명료 합 니 다.url 을 직접 전송 하면 됩 니 다.post 요청 인터페이스 보다 요청 해 야 할 여러 가지 인 자 를 가 져 와 야 합 니 다.
하지만 더 자세히 알 아 보면 사실 post 와 get 은 여기 서 모두 get 요청 을 합 니 다.

서비스 원본 요청

.service('Request', [
  '$http',
  '$cookies',
  '$rootScope',
  '$window',
  '$cookieStore',
  '$location',
  function($http, $cookies, $rootScope, $window, $cookieStore, $location) {
    var request = {
      post: function(api, map, successCallback) {
        $rootScope.dataLoadCount++;
        $rootScope.isLoading = $rootScope.dataLoadCount != 0;
        var url = '../test.php?api=' + encodeURIComponent(api);
        //console.log('[http requestURL]:' + api);
        //~ alert(api);
        var json = '{}';
        if (angular.isDefined(map)) {
          json = angular.toJson(map);
        }

        //console.log('[http requestJson]:' + json);
        url += '&data=' + encodeURIComponent(json);
        var errorCallback = {
          error: function(f) {
            this.fun = f;
          },
          fun: function(data) {}
        };
        var successCallback = {
          success: function(f) {
            return this.fun = f, errorCallback;
          },
          fun: function(data) {}
        };
        $http.get(url).success(function(data, status, headers, config) {
          console.log(config);
          // this callback will be called asynchronously
          // when the response is available
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;

          //console.log('[http success responseData]:' + angular.toJson(data));
          //~ alert('[http success responseData]:'+angular.toJson(data));
          var returnData = {
            code: data.state.code,
            msg: data.state.msg,
            data: data.data
          };
          if (returnData.code == 1) {
            successCallback.fun(returnData);
          } else {
            if (returnData.code == 99) {
              alert(returnData.msg);
              $cookieStore.remove('token');
              $cookieStore.remove('userid');
              delete $cookies.token;
              delete $cookies.userid;
              $rootScope.isLogined = false;
              $rootScope.$broadcast('refreshFooter');
              switch ($rootScope.isWeiXinLogin()) {
                case true:
                  $location.path('login');
                  break;
                case false:
                  $location.path('loginWebapp');
                  break;
              }

              return;
            }
            errorCallback.fun(returnData);
          }
        }).
        error(function(data, status, headers, config) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;

          //console.log('[http error responseData]:' + angular.toJson(data));
          //~ alert('[http error responseData]:status:'+status);
          var returnData = {
            code: 0,
            msg: '      ',
            data: {}
          };
          errorCallback.fun(returnData);
        });

        return successCallback;
      },
      get: function(url, successCallback) {
        $rootScope.dataLoadCount++;
        $rootScope.isLoading = $rootScope.dataLoadCount != 0;
        var errorCallback = {
          error: function(f) {
            this.fun = f;
          },
          fun: function(data) {}
        };
        var successCallback = {
          success: function(f) {
            return this.fun = f, errorCallback;
          },
          fun: function(data) {}
        };
        $http({
          method: 'GET',
          url: url
        }).success(function(data, status, headers, config) {
          // this callback will be called asynchronously
          // when the response is available
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;

          //console.log('[http success responseData]:' + data);
          var returnData = {
            code: 1,
            msg: '    ',
            data: data
          };
          successCallback.fun(data);
        }).
        error(function(data, status, headers, config) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
          $rootScope.dataLoadCount--;
          $rootScope.isLoading = $rootScope.dataLoadCount != 0;
          //console.log('[http error responseData]:' + angular.toJson(data));
          var returnData = {
            code: 0,
            msg: '      ',
            data: ""
          };
          errorCallback.fun(returnData);
        });
        return successCallback;
      }
    }
    return request;
  }
])

이상 의 Angular 서비스 Request 비동기 요청 의 인 스 턴 스 설명 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.