(Угловой) Js - как упростить обещанный результат? - PullRequest
Новая
       27

(Угловой) Js - как упростить обещанный результат?

0 голосов
/ 31 марта 2019

Я из встроенного C-фона и самоучка в AngularJs 1.x;Я подозреваю, что мой вопрос - это общий вопрос JS, а не специфичный для AngularJ.

Я нахожу этот тип повторения в моем коде: 

                $http.get(url)
                    .success(function(data, status, headers, config)
                    {
                       console.log('Success');
                    });

               })
                .error(function(data, status, headers, config)
                {
                    console.error('Error !');
                });

Будучи парнем из C, я неаналогично лямбадам, хотя мне удобно работать с обратными вызовами.

Код для частей успеха и неудач может быть очень большим, и это делает код неопрятным, особенно учитывая весь этот код, передаваемый в качестве параметра.

Я предполагаю, что параметры $http являются / являются (а) обещанием (ями).

Есть ли какой-нибудь способ, которым я могу сделать код более модульным, и его легче читать и поддерживать?

Например, я представляю, что мог бы объявить некоторые функции успеха / неудачи и вызвать их, например: 

function it_succded(data, status, headers, config))
{
    console.log('Success');
});

function it_failed(data, status, headers, config)
{
    console.error('Error !');
});

$http.get(url)
.success(function(data, status, headers, config)
 {
     it_succded(data, status, headers, config))
   });
})
.error(function(data, status, headers, config)
 {
    it_failed(data, status, headers, config)
  });
});

Конечно, я мог бы просто написать это и увидеть, но спросить здесьпотому что я хочу учиться и надеюсь получить объяснение от кого-то, кто действительно понимает это, предпочтительно от того, кто профессионально кодирует (Angular) Js.

Ответы [ 2 ]

1 голос
/ 31 марта 2019

Для использования интерфейса обещания не следует использовать .success() или .error(): они устарели .Вместо этого используйте .then() и catch().Параметры, которые получают эти обратные вызовы, немного отличаются: 

$http.get(url).then(function(response) {
     console.log("Success", response.data);
}).catch(function(response) {
     console.log("Error", response.status);
});

response - это объект, который имеет ожидаемые свойства :

  • data - {string|Object} - тело ответа, преобразованное с помощью функций преобразования.
  • status - {number} - код состояния HTTP ответа.
  • headers - {function([headerName])} - функция получения заголовка.
  • config - {Object} - объект конфигурации, который использовался для генерации запроса.
  • statusText - {string} - текст состояния HTTP ответа.
  • xhrStatus - {string} - Состояние XMLHttpRequest (завершено, ошибка, время ожидания или прерывание).

Вы действительно можете определить функции обратного вызова отдельно, и тогда ваши аргументы обратного вызова могут простобыть ссылками на функции: 

function it_succded(response) {
     console.log("Success", response.data);
}
function it_failed(response) {
     console.log("HTTP Error", response.status, response.statusText);
}
$http.get(url).then(it_succded).catch(it_failed);

Вы можете определить эти функции как методы, например, для объекта $scope: 

$scope.it_succded = function (response) {
     console.log("Success", response.data);
     $scope.data = response.data;
}
$scope.it_failed = function (response) {
     console.log("HTTP Error", response.status, response.statusText);
}
$http.get(url).then($scope.it_succded).catch($scope.it_failed);

Небольшое примечание: помните, что this не будетустанавливается, когда эти обратные вызовы вызываются реализацией PromiseТион.Поэтому либо не используйте в них this, либо определите их как функции стрелок (тогда this будет тем, чем он является в лексическом контексте), привяжите функции к определенному объекту this или предоставьте небольшие обратные вызовы-оболочки:

.then(function(response) { 
     return $scope.it_succded(response);
})
0 голосов
/ 31 марта 2019

Да, вы можете. 

$http({
your configs
})
.then(funtion(result){ // function on success
   return result.data // this is important as AngularJS $http will bind the data from the server into this variable
},
function(errorResponse){
if(errorResponse.status === 401){
    // your code for handling 401 errors
}
else if(errorResponse.status === 404){
    // your code for handling 404 errors
}
else if(errorResponse.status === 500){
    // your code for handling 500 errors
}
})
.then(function(data){
    // another function to process data
    return data
})
.then(function(data){
    // yet another function to process data
    return data
})

Мы можем объединить столько колбэков, сколько захотим. Вы можете прочитать больше об обещанном по этой ссылке: https://scotch.io/tutorials/javascript-promises-for-dummies

Надеюсь, это поможет вам.

...