Статьи

jQuery 1.9+ .Ajax () Новые преимущества интерфейса Promise

Январь 29, 2019

Исходя из 5 NEW JQUERY.AJAX () ПРИМЕРЫ JQUERY 1.9+ , я хотел задокументировать изменения (некоторые из них можно отнести к числу преимуществ) использования интерфейса обещаний для jQuery .Ajax () 1.9+.

  • Именование — Очевидно, что имена изменились с успехом -> сделано, ошибка -> не удалось, завершить -> всегда.
  • Отложенный — отложенные обещания могут быть привязаны к любому месту в вашем приложении, обеспечивая гибкость и возможность повторного использования.
  • Порядок обратных вызовов — они вызываются в следующем порядке: 1 сбой, 2 выполнено, 3 всегда. Стандарт.
  • Mutiples — Вы можете указать любое количество обратных вызовов одного типа. т.е. .always (), .always (), .always (), которые все будут запущены после завершения запроса ajax.
  • аргументы
  • Цепочка — Начиная с jQuery 1.8, вы можете связывать вызовы ajax с помощью функции .then (). Смотрите ниже, например.
  • Объединение. Вы можете объединить .done () и .error () в .then (). Смотрите ниже, например. 
//old complete function
complete Function( jqXHR jqXHR, String textStatus )

//new done function
jqXHR.done(function(data, textStatus, jqXHR) {});

Источник: jQuery.Ajax API

Не стесняйтесь оставлять комментарии, если вы найдете больше я пропустил.

Объедините .done () и .fail () в .then ()

Вы можете объединить функции done () и fail () в одной функции then (). Код выше можно переписать так: 

 var promise = $.ajax({
  url: "/myServerScript"});
 
promise.then(mySuccessFunction, myErrorFunction);

Источник: Отложено и обещают в jQuery

Цепочка Ajax Requests

Начиная с jQuery 1.8, вы можете последовательно соединять функцию then (). В приведенном ниже коде выполняется первый обещание1, и при успешном разрешении запускается getStuff, возвращая обещание, а после успешного разрешения выполняется анонимная функция. 

 var promise1 = $.ajax("/myServerScript1");
 
function getStuff() {
    return $.ajax("/myServerScript2");}
 
promise1.then(getStuff).then(function(myServerScript2Data){
  // Both promises are resolved});
Every callback function receives the result of the previous asynchronous function, in the case of Ajax, that would be the returned data.

Использование .when () в качестве обещания

Вы можете использовать .when () для выделения функции обратного вызова обещания, а именно .done (). 

 var container = $("#mycontainer");
$.when(
    function () {
        return $.Deferred(function (dfd) {
            container.fadeOut('slow', dfd.resolve);
        }).promise();
    }(),
    $.ajax({
        url: 'Path/To/My/Url/1',
        type: 'POST',
        dataType: 'json'
    }),
    $.ajax({
        url: 'Path/To/My/Url/2',
        type: 'POST',
        dataType: 'json'
    })
).done(function (x, data) {
    container.html('Your request has been processed!');
    container.fadeIn('slow');
});

Как видите, мы передаем три обещания $ .when, одно для анимации затухания и два для операций ajax.

* Первый параметр — это самозаполняющаяся анонимная функция, которая создает отложенный обработчик и возвращает обещание. В обратном вызове $ .Deferred функция dfd.resolve передается параметру обратного вызова fadeOut (), что означает, что после завершения анимации будет разрешено отложенное выполнение.
* Что касается двух других параметров, то мы передаем $ .when, поскольку результатом $ .ajax является объект jqXHR, который реализует Promise, мы просто передаем значение, которое возвращается как есть.

Источник: Всегда держите свои (jQuery) обещания

31
Share: