ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJS サービスで非同期 $http 応答を適切に処理する方法は?

AngularJS サービスで非同期 $http 応答を適切に処理する方法は?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-07 17:59:12823ブラウズ

How to Properly Handle Asynchronous $http Responses in AngularJS Services?

サービスでの $http レスポンスの処理

最近の問題では、$ が正常に処理された後にビューが更新されないという問題が発生しました。あなたのhttpリクエストservice.

解決策:

この問題を解決するには、Promise とその "then" 関数を直接操作して、返された非同期応答を処理する必要があります。以下に例を示します。

app.factory('myService', function ($http) {
  var myService = {
    async: function () {
      // $http returns a promise
      var promise = $http.get('test.json').then(function (response) {
        // Process the response and return modified data
        return response.data;
      });
      // Return the promise
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function (myService, $scope) {
  // Call the async method and then do stuff with what is returned in the "then" function
  myService.async().then(function (data) {
    $scope.data = data;
  });
});

この例では、サービスの非同期メソッドは Promise を返します。コントローラーはこのメソッドを呼び出し、「then」関数を使用して Promise の解決された値を処理します。これにより、コントローラーから応答データにアクセスして操作し、ビューを更新できるようになります。

同じ手法を使用して $http リクエストをキャッシュすることもできます。

app.factory('myService', function ($http) {
  var promise;
  var myService = {
    async: function () {
      // If the promise doesn't exist, create it
      if (!promise) {
        promise = $http.get('test.json').then(function (response) {
          // Process the response and return modified data
          return response.data;
        });
      }
      // Return the cached promise
      return promise;
    }
  };
  return myService;
});

このアプローチにより、次のことが保証されます。 $http リクエストは 1 回だけ行われるため、パフォーマンスが向上します。

以上がAngularJS サービスで非同期 $http 応答を適切に処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。