2.1.1. Как браузер обрабатывает асинхронные запросы. AJAX

Филипп Робертс рассказывает о понятии event loop в javascript, которое полезно понимать для использования AJAX.

Javascript – однопоточный язык программирования с единичным последовательным исполнением операций.

Event loop наблюдает за stack и callback queue (сюда попадают задачи из webapi, например после окончания таймера в setTimeout попадет вызов функции). Если stack пуст, то event loop перемещает первую задача в stack, который ее выполняет. Визуализация.

Для тестовых запросов удобно использовать JSONPlaceholder. Это бесплатные REST API с шестью разными видами фэйковых данных: посты, комментарии, альбомы, фотографии, список задач(todo) и пользователи.

Для просмотра json в браузере думаю полезным будет раcширение json-viewer.

Пример запросов на сервер с использованием класса XMLHttpRequest (XHR):

const requestUrl = "https://jsonplaceholder.typicode.com/posts";
function sendRequest(method, url, body = null){
    //конструктор промиса
    return new Promise((resolve, reject) => {
        //конструктор глобального класса
        const xhr = new XMLHttpRequest()
        //конфиг запроса
        xhr.open(method, url)
        //парсер строки в json
        xhr.responseType = 'json'
        //
        xhr.setRequestHeader('Content-Type', 'application/json')
        //слушатель любого ответа сервера
        xhr.onload = () => {
            if (xhr.status >= 400) {
                reject('Ошибка ' + xhr.status + ': ' + xhr.statusText)
            } else {
                resolve(xhr.response)
            }
        }
        //слушатель ошибок соединения
        xhr.onerror = () => {
            reject('Запрос не удался')
        }
        //отправляет запрос
        xhr.send(JSON.stringify(body))
    })
    
}
//get-запрос
sendRequest('GET', requestUrl)
    .then(data => console.log(data))
    .catch(err => console.error(err));
    
const newPost = {
    'userId': 4382,
    'title': 'Заголовок публикации',
    'body': 'Текстовоей наполнение записи'
}
//post-запрос      
sendRequest('POST', requestUrl, newPost)
    .then(data => console.log(data))
    .catch(err => console.error(err));    

Пример запросов с использованием браузерного Api – метод fetch():

const requestUrl = "https://jsonplaceholder.typicode.com/posts";
function sendRequest(method, url, body = null){
    const headers = {
        'Content-Type': 'application/json'
    }
    //возвращает промис-объект
    return fetch(url, {
        method: method,
        body: JSON.stringify(body),
        headers: headers,
    }).then(response => {
        if (response.ok) {
            return response.json()
        } else {
            return.json().then(error => {
                const e = new Error('Ошибка')
                e.data = error
                throw e
            })
        }
    })
    
}
//get-запрос
sendRequest('GET', requestUrl)
    .then(data => console.log(data))
    .catch(err => console.error(err));
    
const newPost = {
    'userId': 4382,
    'title': 'Заголовок публикации',
    'body': 'Текстовоей наполнение записи'
}
//post-запрос      
sendRequest('POST', requestUrl, newPost)
    .then(data => console.log(data))
    .catch(err => console.error(err));