Как дождаться выполнения http запроса с angularjs?

Question

[Turtle_Onni]

Всем привет!
Использую angular js и web api. Проблема в следующем: После создания объекта необходимо перейти на другую страницу где вывести весь список этих объектов. У меня получается весь список без нового объекта. Предполагаю что сервер не успевает добавить в базу объект.
Как это можно решить?
Заранее спасибо!

Answer 1

[bromzh]

$http.post('/api/item', item) // делаем запрос к API
  .then(function (response) { // чейним промис от $http
    // этот код начнёт выполняться только после успешного ответа от сервера
    // в параметре response будут данные ответа: HTTP-код ответа, данные из тела ответа и т.д.
    console.log(response); // обрабатываем ответ от сервера, если надо
    return $state.go('item.list'); // переход на страницу
  });

Comments

[Turtle_Onni]

Здравствуйте!
У меня новая проблема. У меня есть репозиторий в котором имеются все $http запросы.
из скрипта:

prstageRepository.deleteStageLink(id).then(function(){
...
})

репозиторий:

factory.deleteStageLink = function (linkId) {
           var deferred = $q.defer();
           $http.delete(pathApiProjectStageLinks + '/' + linkId).success(function () {
               notifications.add('success', 'Связь удалена!');
               console.log("delete!");
           }).error(function () {
               notifications.add('danger', 'Связь не удалена!');
           });
           return deferred.promise;
       };

Далее у меня по скрипту идут другие функции и выражения. При выполнении скрипта происходит следующий ход выполнения: читается строку с нужной функцией из репозитория, но ответа не получаем, просто заходит затем попадаем обратно в наш скрипт и выполняем его до конца, и только затем выполняет $http запрос. Как сделать чтобы скрипт продолжал только после того как придет ответ с сервера? Вариант включения в функцию then() мне не всегда подходит.
Спасибо.

[bromzh]

Turtle_Onni: Всё не так. Зачем создавать deferred, никак его не использовать (ни resolve, ни reject)? Ведь достаточно просто добавить слово return перед $http.delete, а deferred убрать.

Смысл в том, что если внутри функции выполняется что-то асинхронное, которое возвращает промис, но этот промис не возвращается, то он не попадёт в цепочку и выполнится вне очереди. Т.е.

somePromise
    .then(result => {
        syncFunc1(result);
        asyncFunction(result);
        return syncFunc2(result);
    })
    .then(finalResult => {});

Тут внутри первого then:
1) отработает первая синхронная функция
2) запустится асинхронная функция (она возвращает промис). Но так как её результат не возвращается дальше в цепочку, то её "никто не будет ждать"
3) Не дожидаясь завершения асинхронной функции запустится вторая синхронная функция и во второй then попадёт её результат.

Если же изменить код на такой:

somePromise
    .then(result => {
        syncFunc1(result);
        return asyncFunction(result);
    })
    .then(asyncResult => {
        return syncFunc2(asyncResult);
    })
    .then(finalResult => {});

То:
1) В первом then отработает синхронная функция
2) Запустится асинхронная функция. Т.к. она возвращает промис, он добавится в цепочку промисов и в следующем then можно будет получить то, что спрятано в промисе. Естественно, когда асинхронная функция отработает.
3) Во втором then функция запустится только после получения результата от предыдущего звена, т.е. когда промис из asyncFunction зарезолвится.

Подробности тут: https://habrahabr.ru/company/mailru/blog/269465/

[Turtle_Onni]

Это с моей стороны видимо был не самый удачный пример.
Я использую:

factory.addStageLink = function (stageLink) {
           var deferred = $q.defer();
           $http.post(pathApiProjectStageLinks + '/', stageLink).success(function (id) {
               deferred.resolve(id);
               notifications.add('success', 'Связь добавлена!');
           }).error(function () {
               notifications.add('danger', 'Связь не добавлена!');

           });
           return deferred.promise;
       };

и использую и promise и resolve.
Но в моем случае происходит так что когда в контроллере программа попадает на вызов

prstageRepository.addStageLink (stageLink).then(function(id){
...
})

она просто проходит мимо, но затем после выполнения до конца всей функции в которую включен prstageRepository.addStageLink, она возвращается к ней и выполняет ее(заходит в нее).
Почему так?

[bromzh]

Turtle_Onni:
Во-первых, если программа попадёт в ветку error, то промис не разрешится никогда, т.к. там нет ни resolve ни reject (вроде должно быть так, я хз за ангуляровские недопромисы). Да и использовать success/error считается дурным тоном, эти методы давно deprecated. Надо использовать обычный then.
Во-вторых, даже тут не нужен никакой deferred. Если использовать then/catch, то код будет таким:

factory.addStageLink = function (stageLink) {
return $http.post(pathApiProjectStageLinks + '/', stageLink)
  .then(response => {
    let id = response.data;
    notifications.add('success', 'Связь добавлена!');
    return id
  })
  .catch(err => {
    notifications.add('danger', 'Связь не добавлена!');
    throw err; // Пробрасываем ошибку выше
  });
}

В-третьих, промисы не делают асинхронный код синхронным. Если в контроллере есть несколько вызовов последовательных функций, то они необязательно выполнятся последовательно. Те, что используют что-то асинхронное внутри себя быстро вернут неразрешившийся промис, и запустится следующая функция. Однако, код, который указан в then начнёт выполняться только после того, как промис что-то вернёт. Так что всё в порядке, код выполняется ровно как следует.

Answer 2

[Alex]

https://docs.angularjs.org/api/ng/service/$q