Helpex - Trao đổi & giúp đỡ Đăng nhập
4

Tôi e rằng tôi có thể đã đi sâu vào lỗ hổng của các lời hứa đệ quy.

Tôi có một dịch vụ xử lý api của tôi. (Nó có thêm một lớp hứa hẹn để tôi có thể chuyển trở lại json cục bộ nếu api ngoại tuyến. (Không chắc nó cần thiết như thế nào nữa) - mayte tôi nên loại bỏ nó vì đơn giản). Sau đó, tôi đã nhận được cuộc gọi không đồng bộ đã hứa trong bộ điều khiển của mình.

Tất cả điều này đều hoạt động tốt miễn là tôi nhận được dữ liệu mà tôi mong đợi , nhưng nó không xử lý lỗi tốt lắm. Khi tôi nhận được 400 và 500, nó không gửi thông báo lỗi cho người dùng qua bánh mì nướng.

Đáng buồn thay, đây không phải là một api RESTful tuân thủ đầy đủ. Lỗi 400 tôi nhận được đơn giản là

{"Message":"No packages found"}

Tôi thực sự không hiểu làm thế nào để điều này hoạt động như bình thường và thay thế thành công / lỗi bằng then / catch (theo phương pháp hay nhất về Angular).

Đây là một cuộc gọi dịch vụ điển hình:

var _getPackagesPage = function (options) {

    var pageSize = options.data.pageSize;
    var page = options.data.page -1;
    return $q (function(resolve, reject) {
        switch (dataSource) {
            case 'api'://staging - live api data
                return $http({
                    method: 'get',
                    url: serviceBase + 'api/Packages?pageSize=' + pageSize + '&page=' + page
                }).then(function(results) {
                    resolve(results);
                });
                break;

            default: // dev - local json

                $.getJSON('Content/data/Packages.json', function (json) {
                    var pageSize = options.data.pageSize;
                    var page = options.data.page;
                    var newjson = json.splice(page*pageSize,pageSize);
                    resolve(newjson);
                });
        }
    });
};

và một cuộc gọi điển hình trong bộ điều khiển:

( tùy chọn là đối tượng dữ liệu được đưa trở lại lưới dữ liệu của tôi (Kendo))

    vm.getPackages = function(options) {
        return packagesService.getPackagesPage (options)
            .then(function(results) {
                options.success(results.data.Items);
            })
            .catch(function(error) {
                options.error(error);
                toastr.error(error.Message);
            });
    };

Làm thế nào tôi có thể làm sạch điều này?

[UPDATE] Đã cố gắng sửa cho mỗi Câu trả lời 1, bên dưới

Dịch vụ:

    var _getOrdersPage = function (options) {

        var deff = $q.defer();
        var pageSize = options.data.pageSize;
        var page = options.data.page -1;
        return $http({
            method: 'get',
            url: serviceBase + 'api/Packages?pageSize=' + pageSize + '&page=' + page
        })
        .then(
            function(results) {
                deff.resolve(results);
            },
            function(ex){ 
                deff.reject(ex);
            });
        return deff.promise;
    };

Bộ điều khiển:

    vm.getOrders = function (options) {
        return ordersService.getOrdersPage (options)
            .then(function(results) {
                console.log("results!");
                console.log(results);
            })
            .catch(function(error) {
                console.log("error!");
                console.log(error);
            });
    };

kết quả trong:

NHẬN http: // <myURL> / api / Packages? PageSize = 20 & page = 0 400 (Yêu cầu không hợp lệ)

kết quả!

chưa xác định

4 hữu ích 5 bình luận 8.0k xem chia sẻ
1

Tôi đang tháo hộp công tắc cho ngắn gọn.

var _getPackagesPage = function (options) {

var pageSize = options.data.pageSize;
var page = options.data.page -1;
var deff = $q.defer();

$http({
      method: 'get',
      url: serviceBase + 'api/Packages?pageSize=' + pageSize + '&page=' + page
      }).then(
           function(results) {
              deff.resolve(results);
            },
            function(ex){ 
              deff.reject(ex);
             });

 return deff.promise;
    };

Bộ điều khiển

vm.getOrders = function (options) {
    return ordersService.getOrdersPage (options)
        .then(
         function(results) {
            console.log("results!");
            console.log(results);
        },
        function(error) {
            console.log("error!");
            console.log(error);
        });
};

Nếu bạn không có bất kỳ logic nào bên trong dịch vụ của mình, thì bạn có thể trả về chính $ http vì $ http inturn là một lời hứa:

var _getPackagesPage = function (options) {

  var pageSize = options.data.pageSize;
  var page = options.data.page -1;

   return $http({
        method: 'get',
         url: serviceBase + 'api/Packages?pageSize=' + pageSize + '&page=' + page
      });

    };
1 hữu ích 5 bình luận chia sẻ
0

Bạn có quá nhiều lợi nhuận trong dịch vụ của mình. Cái thứ hai không được gọi.

Bạn không cần tạo lời hứa theo cách thủ công vì $ http trả về apromise.

Bạn không trả lại dữ liệu từ dịch vụ của mình.

var _getOrdersPage = function(options) {
        var pageSize = options.data.pageSize;
        var page = options.data.page -1;
        return $http({
            method: 'get',
            url: serviceBase + 'api/Packages?pageSize=' + pageSize + '&page=' + page
        })
        .then(
            function(results) {
                return results;
            },
            function(ex){
                return ex;
            });
}

Bộ điều khiển của bạn ổn, bạn có thể sử dụng hàm catch () hoặc chuyển một lệnh gọi lại lỗi.

Thí dụ:

function myService($http) {
  this.getData = function(url) {
    return $http.get(url).
    then(function(response) {
      return response.data;
    }, function(error) {
      return error;
    });
  }
};

function MyController(myService) {
  var vm = this;  
  vm.result = [];
  vm.apiUrl = "https://randomuser.me/api/";
  myService.getData(vm.apiUrl).then(function (data) {
    vm.result = data;
  },
  function(error) {
    console.log(error);
  });
};

angular.module('myApp', []);
angular
    .module('myApp')
    .service('myService', myService)
    .controller('MyController', MyController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyController as ctrl">
    {{ ctrl.result }}
  </div>
</div>
Mở rộng đoạn mã

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ angularjs promise , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading