Menggunakan sukses / kesalahan / akhirnya / menangkap dengan Janji di AngularJS

Saya menggunakan $httpdi AngularJs, dan saya tidak yakin tentang cara menggunakan janji yang dikembalikan dan menangani kesalahan.

Saya memiliki kode ini:

$http
    .get(url)
    .success(function(data) {
        // Handle data
    })
    .error(function(data, status) {
        // Handle HTTP error
    })
    .finally(function() {
        // Execute logic independent of success/error
    })
    .catch(function(error) {
        // Catch and handle exceptions from success/error/finally functions
    });

Apakah ini cara yang baik untuk melakukannya, atau ada cara yang lebih mudah?

Janji adalah abstraksi atas pernyataan yang memungkinkan kita mengekspresikan diri secara sinkron dengan kode asinkron. Mereka mewakili pelaksanaan tugas satu kali.

Mereka juga menyediakan penanganan pengecualian, seperti kode normal, Anda dapat mengembalikan dari janji atau melempar.

Yang Anda inginkan dalam kode sinkron adalah:

try{
  try{
      var res = $http.getSync("url");
      res = someProcessingOf(res);
  } catch (e) {
      console.log("Got an error!",e);
      throw e; // rethrow to not marked as handled
  }
  // do more stuff with res
} catch (e){
     // handle errors in processing or in error.
}

Versi yang dijanjikan sangat mirip:

$http.get("url").
then(someProcessingOf).
catch(function(e){
   console.log("got an error in initial processing",e);
   throw e; // rethrow to not marked as handled, 
            // in $q it's better to `return $q.reject(e)` here
}).then(function(res){
    // do more stuff
}).catch(function(e){
    // handle errors in processing or in error.
});

Lupakan tentang penggunaan successdan errormetode.

Kedua metode tersebut tidak digunakan lagi di sudut 1.4. Pada dasarnya, alasan di balik penghentian ini adalah karena mereka tidak ramah rantai , bisa dikatakan.

Dengan contoh berikut, saya akan mencoba menunjukkan apa yang saya maksud successdan errortidak ramah rantai . Misalkan kita memanggil API yang mengembalikan objek pengguna dengan alamat:

Objek pengguna:

{name: 'Igor', address: 'San Francisco'}

Panggilan ke API:

$http.get('/user')
    .success(function (user) {
        return user.address;   <---  
    })                            |  // you might expect that 'obj' is equal to the
    .then(function (obj) {   ------  // address of the user, but it is NOT

        console.log(obj); // -> {name: 'Igor', address: 'San Francisco'}
    });
};

Apa yang terjadi?

Karena successdan errormengembalikan janji asli , yaitu yang dikembalikan oleh $http.get, objek yang diteruskan ke callback thenadalah seluruh objek pengguna , artinya input yang sama ke successcallback sebelumnya .

Jika kami merantai dua then, ini tidak akan terlalu membingungkan:

$http.get('/user')
    .then(function (user) {
        return user.address;  
    })
    .then(function (obj) {  
        console.log(obj); // -> 'San Francisco'
    });
};

Saya pikir jawaban sebelumnya benar, tetapi berikut adalah contoh lain (hanya fyi, success () dan error () tidak digunakan lagi menurut halaman Utama AngularJS :

$http
    .get('http://someendpoint/maybe/returns/JSON')
    .then(function(response) {
        return response.data;
    }).catch(function(e) {
        console.log('Error: ', e);
        throw e;
    }).finally(function() {
        console.log('This finally block');
    });

Jenis perincian apa yang Anda cari? Anda biasanya bisa bertahan dengan:

$http.get(url).then(
  //success function
  function(results) {
    //do something w/results.data
  },
  //error function
  function(err) {
    //handle error
  }
);

Saya telah menemukan bahwa "akhirnya" dan "menangkap" lebih baik saat merangkai banyak janji.

Dalam kasus Angular $ http, fungsi success () dan error () akan membuka bungkus objek respons, sehingga tanda tangan panggilan balik akan menjadi seperti $ http (...). Success (fungsi (data, status, header, config))

untuk then (), Anda mungkin akan berurusan dengan objek respons mentah. seperti yang diposting di dokumen API AngularJS $ http

$http({
        url: $scope.url,
        method: $scope.method,
        cache: $templateCache
    })
    .success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
    })
    .error(function(data, status) {
        $scope.data = data || 'Request failed';
        $scope.status = status;
    });

.Catch terakhir (...) tidak akan diperlukan kecuali ada kesalahan baru yang muncul di rantai janji sebelumnya.

Saya melakukannya seperti yang disarankan Bradley Braithwaite di blognya :

app
    .factory('searchService', ['$q', '$http', function($q, $http) {
        var service = {};

        service.search = function search(query) {
            // We make use of Angular's $q library to create the deferred instance
            var deferred = $q.defer();

            $http
                .get('http://localhost/v1?=q' + query)
                .success(function(data) {
                    // The promise is resolved once the HTTP call is successful.
                    deferred.resolve(data);
                })
                .error(function(reason) {
                    // The promise is rejected if there is an error with the HTTP call.
                    deferred.reject(reason);
                });

            // The promise is returned to the caller
            return deferred.promise;
        };

        return service;
    }])
    .controller('SearchController', ['$scope', 'searchService', function($scope, searchService) {
        // The search service returns a promise API
        searchService
            .search($scope.query)
            .then(function(data) {
                // This is set when the promise is resolved.
                $scope.results = data;
            })
            .catch(function(reason) {
                // This is set in the event of an error.
                $scope.error = 'There has been an error: ' + reason;
            });
    }])

Poin Utama:

• Fungsi penyelesaian terhubung ke fungsi. Lalu di pengontrol kami yaitu semuanya baik-baik saja, jadi kami dapat menepati janji kami dan menyelesaikannya.

• Fungsi penolakan menautkan ke fungsi .catch di pengontrol kami yaitu ada yang tidak beres, jadi kami tidak bisa menepati janji kami dan harus menolaknya.

Ini cukup stabil dan aman dan jika Anda memiliki kondisi lain untuk menolak janji, Anda selalu dapat memfilter data Anda dalam fungsi sukses dan memanggil deferred.reject(anotherReason) dengan alasan penolakan.

Seperti yang disarankan Ryan Vice di komentar , ini mungkin tidak terlihat berguna kecuali Anda sedikit mengutak-atik responsnya.

Karena successdan errortidak digunakan lagi sejak 1.4 mungkin lebih baik menggunakan metode janji reguler thendan catchdan mengubah respons di dalam metode tersebut dan mengembalikan promise dari respons yang diubah itu.

Saya menunjukkan contoh yang sama dengan kedua pendekatan dan pendekatan ketiga di antara:

successdan errorpendekatan ( successdan errormengembalikan janji respons HTTP, jadi kami membutuhkan bantuan $quntuk mengembalikan janji data):

function search(query) {
  // We make use of Angular's $q library to create the deferred instance
  var deferred = $q.defer();

  $http.get('http://localhost/v1?=q' + query)
  .success(function(data,status) {
    // The promise is resolved once the HTTP call is successful.
    deferred.resolve(data);              
  })

  .error(function(reason,status) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.error){
      deferred.reject({text:reason.error, status:status});
    }else{
      //if we don't get any answers the proxy/api will probably be down
      deferred.reject({text:'whatever', status:500});
    }
  });

  // The promise is returned to the caller
  return deferred.promise;
};

thendan catchpendekatan (ini sedikit lebih sulit untuk diuji, karena lemparan):

function search(query) {

  var promise=$http.get('http://localhost/v1?=q' + query)

  .then(function (response) {
    // The promise is resolved once the HTTP call is successful.
    return response.data;
  },function(reason) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.statusText){
      throw reason;
    }else{
      //if we don't get any answers the proxy/api will probably be down
      throw {statusText:'Call error', status:500};
    }

  });

  return promise;
}

Namun ada solusi setengah jalan (dengan cara ini Anda dapat menghindari throwdan bagaimanapun Anda mungkin perlu menggunakan $quntuk mengejek perilaku janji dalam pengujian Anda):

function search(query) {
  // We make use of Angular's $q library to create the deferred instance
  var deferred = $q.defer();

  $http.get('http://localhost/v1?=q' + query)

  .then(function (response) {
    // The promise is resolved once the HTTP call is successful.
    deferred.resolve(response.data);
  },function(reason) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.statusText){
      deferred.reject(reason);
    }else{
      //if we don't get any answers the proxy/api will probably be down
      deferred.reject({statusText:'Call error', status:500});
    }

  });

  // The promise is returned to the caller
  return deferred.promise;
}

Segala jenis komentar atau koreksi dipersilakan.