web-dev-qa-db-ja.com

Angular HttpPromise: `success` /` error`メソッドと `then`の引数の違い

AngularJS doc によると、$httpを呼び出すと次のようになります。

標準のthenメソッドと2つのhttp固有のメソッドでpromiseオブジェクトを返します。successおよびエラーthenメソッドは2つの引数asuccesserrorをコールバックします。応答オブジェクトとともに呼び出されます。 successおよびerrorメソッドは、単一の引数(要求が成功または失敗したときにそれぞれ呼び出される関数)を取ります。これらの関数に渡される引数は、thenメソッドに渡される応答オブジェクトの非構造化表現です。

responseオブジェクトがある場合には逆構造化されているという事実を除けば、私は次のような違いはありません。

  • promise.thenの引数として渡されるために渡された成功/エラーコールバック
  • promiseのpromise.success/promise.errorメソッドの引数として渡されたコールバック

ありますか?見かけ上同一のコールバックを渡すためのこれら2つの異なる方法のポイントは何ですか?

175

NBこの答えは事実上正しくありません。以下のコメントで指摘されているように、success()は元の約束を返します。私は変更しません。編集するには、OPのままにします。


2との大きな違いは、.then()呼び出しは約束を返す(コールバックから返される値で解決される)のに対し、.success()はより伝統的な方法でコールバックを登録する方法で、約束を返さないことです。

プロミスベースのコールバック(.then())は、プロミスの連鎖を容易にします(呼び出しをして結果を解釈し、そしてしてからそして別の呼び出しをして結果を解釈します。などを呼び出す。

.success()メソッドは、呼び出しをチェーニングしたり、promise APIを操作したりする必要がない場合(ルーティングなど)に合理化された便利なメソッドです。

要するに:

  • .then() - promise APIのフルパワー、しかしもう少し冗長
  • .success() - 約束を返しませんが、もう少し便利な構文を提示します。
154

ここにはすでにいくつかの良い答えがあります。しかし、提供されている並列処理の違いを解消する価値があります。

  • success()は元の約束を返します
  • then()は新しい約束を返します

違いはthen()が順次操作を駆動するということです。なぜなら、各呼び出しは新しい約束を返すからです。

$http.get(/*...*/).
  then(function seqFunc1(response){/*...*/}).
  then(function seqFunc2(response){/*...*/})
  1. $http.get()
  2. seqFunc1()
  3. seqFunc2()

success()はハンドラーが同じ約束につながっているので並列操作を駆動します。

$http(/*...*/).
  success(function parFunc1(data){/*...*/}).
  success(function parFunc2(data){/*...*/})
  1. $http.get()
  2. parFunc1()parFunc2()を並行して
202
event_jr

単純なGETリクエストのためのいくつかのコード例。多分これは違いを理解するのに役立ちます。 thenを使う:

$http.get('/someURL').then(function(response) {
    var data = response.data,
        status = response.status,
        header = response.header,
        config = response.config;
    // success handler
}, function(response) {
    var data = response.data,
        status = response.status,
        header = response.header,
        config = response.config;
    // error handler
});

success/errorを使う:

$http.get('/someURL').success(function(data, status, header, config) {
    // success handler
}).error(function(data, status, header, config) {
    // error handler
});
112
TheHippo

.then()はチェーン可能であり、前の.then()が解決するのを待ちます。

.success()と.error()は連鎖させることができますが、それらはすべて一度に起動します(それほど重要ではありません)。

.success()と.error()は単純な呼び出しにはちょうどいい(簡単なメーカー):

$http.post('/getUser').success(function(user){ 
   ... 
})

だからあなたはこれを入力する必要はありません:

$http.post('getUser').then(function(response){
  var user = response.data;
})

しかし、一般的に私はすべてのエラーを.catch()で処理します。

$http.get(...)
    .then(function(response){ 
      // successHandler
      // do some stuff
      return $http.get('/somethingelse') // get more data
    })
    .then(anotherSuccessHandler)
    .catch(errorHandler)

あなたがIE8以下をサポートする必要があるならば、あなたの.catch()と.finally()をこのように書いてください(IEの予約メソッド):

    .then(successHandler)
    ['catch'](errorHandler)

作業例:

これは、エラーなどを処理してすべてを再現する方法について私の記憶をリフレッシュするために、よりコーデックな形式で書いたものです。

http://jsfiddle.net/nalberg/v95tekz2/

27
nawlbergs

完了のために、違いを示すコード例を次に示します。

成功\エラー:

$http.get('/someURL')
.success(function(data, status, header, config) {
    // success handler
})
.error(function(data, status, header, config) {
    // error handler
});

その後:

$http.get('/someURL')
.then(function(response) {
    // success handler
}, function(response) {
    // error handler
})
.then(function(response) {
    // success handler
}, function(response) {
    // error handler
})
.then(function(response) {
    // success handler
}, function(response) {
    // error handler
}).
17
MichaelLo

公式の通知:成功とエラーは廃止されました。代わりに標準のthenメソッドを使用してください。

廃止のお知らせ:$ httpレガシープロミスメソッドの成功とエラーは廃止されました。代わりに標準のthenメソッドを使用してください。 $ httpProvider.useLegacyPromiseExtensionsがfalseに設定されている場合、これらのメソッドは$ http/legacyエラーをスローします。

リンク:https://code.angularjs.org/1.5.7/docs/api/ng/service /$http

スクリーンショット:スクリーンショットを見る

2
MagicBoy