Блог

У меня есть требование, согласно которому мне нужно создать службу в Angular 1 и загрузить данные с помощью вызова API, к которому можно получить доступ в контроллерах. Ранее я пытался вызвать API с помощью службы $ http и присвоить данные переменной / объекту. Затем я внедрил сервис и присвоил переменную / объект переменной / объекту области видимости контроллера.

То, что я наблюдал в цикле событий контроллера, не совпадает с циклом событий службы, и переменная / объект области видимости контроллера остается неопределенной. Позже я нашел решение для работы, вернув обещание из службы и вызвав обещание в контроллере, однако я новичок в promises и не в состоянии полностью усвоить, что при вызове promise мне пришлось передать функцию в качестве аргумента, который, как я думаю, является обратным вызовом для вызова API $ http, но я не уверен, как это работает под капотом. Кто-нибудь может это объяснить?

 //service code
this.getuserimages = function(uname) {
    console.log("Username in UserImage Service: "   uname);
    var promise = $http.get('/api/images/'   uname).then(function(response) {
        this.userimages = response.data;
        return this.userimages;
    });
    return promise;
}

// controller code        
var userimagespromise = userImageService.getuserimages($routeParams.username);
userimagespromise.then(function(data) {
            $scope.userimages = data;
  

Ваш код представляет собой цепочку обещаний.

Я переписал ваш код таким образом, чтобы эта цепочка была более понятной, но значение осталось точно таким же:

 $http.get('/api/images/'   uname)
.then(function(response) {
    this.userimages = response.data;
    return this.userimages;
})
.then(function(images) {
    $scope.userimages = images;
});

  

Вы можете прочитать этот поток следующим образом:

• Пожалуйста, достаньте мне пользовательские изображения
• И тогда они будут доступны (=> возвращены из get и переданы функции then), сохраните их в переменной и верните следующему элементу цепочки
• И тогда, когда они будут доступны (=> возврат из предыдущего promise), установите их в $scope

Пожалуйста, обратите внимание, что весь поток является асинхронным, потому что каждое обещание является «объектом, представляющим возможное завершение или сбой асинхронной операции«.

Более подробную информацию вы можете найти в документации Promise.