Создание фреймворка для SPA на чистом JavaScript. Урок 11. Класс HTTP

Премиум уроки по веб-разработке:

В данном заключительном уроке мы создадим класс http, который будет работать с ajax.

В данном уроке вы узнаете, как можно на чистом javascript создать класс для работы с ajax.

В результате урока мы настроим сервер для открытого API и будем делать к нему запросы.

[DimchikArtemchik]

Большое спасибо) Эти 11 уроков очень помогли написать свое SPA, даже не смотря на популярные в 2022 React.js и Vue.js - иногда заказчик требует самописное SPA приложение.

[ИльяКарев-рф]

Пролайкал весь курс. Очень интересно. Понравилось потом самому углубиться в развитие фреймворка. Например, не вызывать каждый раз render(), а сделать автоматическую перерисовку после изменения объекта data в компоненте.

[TV-xqdn]

Спасибо за прекрасный курс! Очень помог!

[Puffik]

Спасибо за курс! Очень круто! С нетерпением жду продолжения!))

[avelis]

уникальный курс, спасибо! хотелось бы продолжения

[ahatuhov]

Здравствуйте.
Спасибо вам большое за курс! Очень познавательно!
У меня возник вопрос. Подскажите мне пожалуйста. Как быть если мне необходимо взять информацию из готового json-файла. В какую папку нужно поместить json-файл чтобы правильно указать (url)?

[АндрейМельниченко-ъщ]

А как можно передавать данные между компонентами? Допустим, на одной странице сделали запрос, получили данные и их необходимо отобразить на другой странице.

[ТатьянаЛ-лэ]

спасибо за урок, а где можно посмотреть код?

[norde_]

Скажите пожалуйста
нормально написал или нужно что-то поправить?
import { _ } from "./util";

class Http {
get(url) {
return sendRequest("GET", url);
}
post(url, headers, data) {
return sendRequest("POST", url, headers, data);
}
}

function sendRequest(method, url, headers, data) {
let inf = { method };
if (method === "POST") {
if (_.isUndefined(headers) && _.isEmpty(headers)) {
throw new Error(`Error in Headers`);
}
if (_.isUndefined(data) && _.isEmpty(data)) {
throw new Error(`Error in Data`);
}
inf = {
method,
headers,
body: JSON.stringify(data)
};
}
return fetch(url, inf).then(response => {
if (response.ok) {
return response.json();
}
});
}

export const http = new Http();