Callback (ф-ия обратного вызова)

  


  function sum(a, b) {
    return parseFloat(a) + parseFloat(b);
  }

  var five = sum(2, 3)

Callback (ф-ия обратного вызова)

  


  function slooow(a, b) {
    return getFromAPI(a) + getFromAPI(b);
  }

  var five = slooow(2, 3) // Задержка

Callback (ф-ия обратного вызова)

  


  function slooow(a, b, callback) {
    var a = getFromAPI(a);
    var b = getFromAPI(b);

    var sum = a + b;
    callback(sum);
  }

  slooow(2, 3, function(result) {
    doSomethingWith(result);
  })

XMLHttpRequest

Создаем объект

Открываем соединение

Отправляем запрос

Проверяем статус

Обрабатываем ответ

XMLHttpRequest

  var XHR = new XMLHttpRequest();


  XHR.open('GET', 'http://api.com/actors', false);


  XHR.send();


  XHR.onprogress = function(event) {
    console.log('Загружено:' + event.loaded + ' из ' + event.total);
  }


  xhr.onload = function() {
    console.log('Код ответа:' + this.status);
  }

Синхронный вызов

  var actors;

  var XHR = new XMLHttpRequest();

  XHR.open('GET', 'http://api.com/actors', false);

  XHR.send();

  xhr.onload = function() {
    actors = JSON.parse( this.responseText )
  }

  console.log(actors)
  // [{name: 'Том', last_name: 'Круз'}]

Асинхронный вызов

  var actors;

  var XHR = new XMLHttpRequest();

  XHR.open('GET', 'http://api.com/actors', true);

  XHR.send();

  xhr.onload = function() {
    actors = JSON.parse( this.responseText )
  }

  console.log(actors);
  // undefined

Синхронный код

Асинхронный код

 Инструменты

Браузер

XMLHttpRequest

jQuery

Fetch polyfill

Node.js

Node http

Axios

Fetch

4 состояния интерфейса

Ожидание

Загрузка

Успех

Ошибка

Сценарий

1. Обработка события (клик, вызов функции итд)
    
2. Открываем соединение и отправляем запрос
    
3. Включаем в интерфейсе анимацию загрузки
   или показваем прогресс загрузки (в %)
    
4. По завершении проверяем статус ответа
    
5. Выводим данные на страницу, показываем,
   что запрос успешно или что произошла ошибка