Jquery done: deferred.done() | jQuery API Documentation

Получение данных от сервера в jQuery

В этом видео мы с вами разберем, как писать запросы к серверу в javascript используя jQuery.

Напоминаю, что идея состоит в том, чтобы получить данные от сервера асинхронно с помощью HTTP-запроса и изменить страницу у пользователя без перезагрузки.

Для того, чтобы обращатся на сервер за данными, давайте создадим API с тестовыми данными с помощью сервиса mocky.io.

Вот у меня есть JSON данных

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  }
]

Вставляем его в body запроса и в advance mode выбираем

 Access-Control-Allow-Origin:*

Для того, чтобы любой домен мог обращатся к этому API.

Нажимаем Generate response и получаем ссылку на наш API.

Теперь давайте посмотрим на мою заготовку для урока. Это просто базовый html файл, в который подключено два скрипта jquery и code.js в котором мы будем писать код.

Давайте напишем код, который получит данные от сервера.

var promise = $.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
})

Очень важно помнить, что в результате выполнения мы получаем не данные, а промис. Это значит, что мы можем подписаться на получение данных из промиса с помощью .then, передав туда callback. Тогда первым аргументом, мы получим наши данные.

$.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
}).then(function (result) {
  console.log('result', result)
})

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

Что делать если мы хотим обработать ошибку? Нам нужно подписаться с помощью .catch на error.

$.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
}). then(function (result) {
  console.log('result', result)
}).catch(function (err) {
  console.log('err', err)
})

Если мы изменим ссылку на неправильную то попадем в error.

В $.ajax можно также использовать методы done и fail, которые являются аналогами then и catch, но я советую придерживаться в работе с любыми промисами использования then и catch, так как это ближе к стандарту. Например в es6 промисах у вас тоже будут the и catch, а это значит, что код будет выглядит одинаково.

В $.ajax можно задавать множество разнообразных опций, но я перечислю только самые используемые из них.

Первое это конечно method. По умолчанию он get и мы можем менять его например на post, чтобы отправить post запрос.

$.ajax({
  method: 'POST',
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
}).then(function (result) {
  console.log('result', result)
}).catch(function (err) {
  console.log('err')
})

Конечно чаще всего в POST запрос мы хотим передать какие-то данные. В этом нам поможет поле data

$.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30',
  method: 'POST',
  data: {
    test: 1
  }
}).then(function (result) {
  console.log('result', result)
}).catch(function (err) {
  console.log('err')
})

Если мы посмотрим в network, то увидим, что данные у нас передаются.

Также в jQuery есть алиасы метода $.ajax. Это $.get, $.post, $.getJSON, которые хоть и более короткие, но на мой взгляд менее читабельные и лучше придерживаться полной записи.

Напоминаю, что $.ajax, это всего лишь обертка нам стандартным для javascript XMLHttpRequest.

Какие же основные преимущества она нам дает?

1. Как результат выполнения мы получаем промис, а это значит с ним очень удобно работать с помощью .then и .catch
2. Очень простое API. Мы просто указываем обьектом опции и все работает.

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

Обработка последовательных вызовов AJAX с использованием jQuery

Существует требование сделать несколько вызовов AJAX параллельно для получения необходимых данных, и каждый последующий вызов зависит от данных, полученных в предыдущем вызове. Поскольку AJAX является асинхронным , невозможно контролировать порядок выполнения вызовов. Из-за такого поведения возникает несоответствие в данных, которые будут привязаны к пользовательскому интерфейсу 9.0004 .

Пример из реальной жизни
Наша команда работала над приложением, которое интегрировало в него все отчеты, созданные с помощью Microsoft Power BI , и конечные пользователи, в зависимости от их уровней доступа, могли просматривать отчеты и другие связанные данные . У нас также была система управления пользователями , откуда администраторы могли управлять другими пользователями и ограничивать данные, к которым у них есть доступ.

На одном из экранов у нас есть требование отобразить все Доступные отчеты в системе в одном раскрывающемся списке и все Назначенные отчеты пользователю в другом раскрывающемся списке, как показано на рисунке ниже.

Здесь нам нужно было сделать два вызова AJAX, чтобы получить данные для раскрывающихся списков выше. Один вызов будет получать назначенные отчеты, а затем следует вызвать другой, чтобы получить все доступные отчеты, которые будут отфильтрованы на основе данных, которые уже были получены в первом вызове, чтобы получить фактически доступные отчеты.

Назначенные отчеты = Назначенные отчеты

Доступные отчеты = Общее количество доступных отчетов – Назначенные отчеты

Раньше мы просто вызывали эти функции одну за другой.

Из-за асинхронного поведения иногда функция getAvailableReports() использовалась для первого нажатия, что приводило к выборке несогласованных данных в раскрывающиеся списки Доступные отчеты , как показано ниже.

Самый простой и простой способ решить эту проблему — вызвать обе функции последовательно, вложив getAvailableReports() в обратный вызов успеха. из getMappedReports() , как показано в приведенном ниже коде
Если необходимо выполнить несколько последовательных вызовов AJAX , как показано на изображении ниже, то приведенный выше подход делает код менее читаемым. Это привело бы к большому количеству вложенных обратных вызовов, которые необходимо синхронизировать, что часто называют «9».0003 ад обратного вызова. »

2. Общий подход, допускающий повторное использование . jQuery.when() принимает отложенных объекта (объекты Deferred, Promise или Thenable)

deferred.

then() — это обработчик, который вызывается, когда отложенный объект разрешается, отклоняется или все еще выполняется

Теперь, объединив вышеуказанные концепции, мы можем сделать два ajax-запроса один за другим, как показано ниже.

Однако есть небольшая проблема. Функция jQuery.when() принимает списки аргументов, поэтому мы должны передавать их следующим образом, если у нас есть несколько последовательных вызовов ajax:

Но что, если у нас есть сотни вызовов ajax? Нам нужен способ преобразовать эти вызовы ajax из jQuery.when() в список аргументов. Вот где функция apply() пригодится.

Когда мы вызываем функцию jQuery.when() , ключевое слово this внутри функции неявно связывается с объектом jQuery. Но когда мы вызываем jQuery.when.apply() , мы должны явно связать ключевое слово с чем-то. И мы знаем, что привязка должна быть с объектом jQuery, поэтому мы передаем объект jQuery, также известный как $, в качестве первого аргумента.

Поскольку мы знаем, что каждый jQuery.ajax() возвращает отложенный объект , мы можем вернуть список таких отложенных объектов в качестве аргумента функции jQuery.when.apply(), как показано ниже. Теперь решение выглядит более чистым, читабельным, ремонтопригодным и пригодным для повторного использования.

 <роль div="предупреждение">
  Это основное предупреждение — проверьте его!