Встроенный модуль m.request

Фреймворк Mithril предоставляет компактный и мощный инструмент для работы с HTTP-запросами — встроенный модуль m.request. Он объединяет функциональность fetch и промисов, обеспечивая удобный и последовательный способ взаимодействия с сервером в приложениях на JavaScript.

Основные возможности

Асинхронные HTTP-запросы: m.request поддерживает методы GET, POST, PUT, DELETE и другие стандартные HTTP-методы.
Работа с JSON: по умолчанию запросы отправляются и принимаются в формате JSON, но это поведение можно настраивать.
Обработка ошибок: m.request возвращает промис, который отклоняется при сетевых ошибках или кодах состояния, не попадающих под 2xx.
Интеграция с компонентами Mithril: обновление данных автоматически синхронизируется с виртуальным DOM через промисы.

Синтаксис и базовое использование

m.request({
    method: "GET",
    url: "/api/users",
}).then(function(data) {
    console.log(data);
}).catch(function(error) {
    console.error(error);
});

Пояснения к ключевым параметрам:

method — HTTP-метод запроса (GET, POST, PUT, DELETE и т.д.).
url — адрес ресурса. Можно использовать относительные и абсолютные пути.
body — тело запроса для методов, отличных от GET. Может быть объектом JavaScript.
headers — дополнительные заголовки запроса.
withCredentials — булево значение для отправки куки и авторизационных данных при кросс-доменных запросах.

Примеры использования

GET-запрос с параметрами:

m.request({
    method: "GET",
    url: "/api/items",
    params: { category: "books", limit: 10 }
}).then(function(items) {
    console.log(items);
});

Параметр params автоматически сериализуется в строку запроса.

POST-запрос с телом:

m.request({
    method: "POST",
    url: "/api/items",
    body: { name: "New Item", price: 100 },
}).then(function(response) {
    console.log(response);
});

m.request автоматически сериализует объект в JSON и добавляет заголовок Content-Type: application/json, если заголовок не задан вручную.

Обработка ошибок

m.request возвращает промис, который может быть обработан через .catch. Ошибки делятся на сетевые и серверные:

m.request({
    method: "GET",
    url: "/api/unknown"
}).then(function(data) {
    console.log(data);
}).catch(function(error) {
    console.error("Ошибка запроса:", error.message);
});

Для тонкой настройки обработки можно использовать deserialize и extract:

deserialize — преобразует ответ сервера перед передачей промису.
extract — позволяет перехватывать и модифицировать ответ до его десериализации.

m.request({
    method: "GET",
    url: "/api/items",
    deserialize: function(responseText) {
        const data = JSON.parse(responseText);
        return data.items;
    }
}).then(function(items) {
    console.log(items);
});

Настройка глобальных параметров

Для единообразия запросов можно задать глобальные настройки:

m.request = m.request.defaults({
    headers: { Authorization: "Bearer TOKEN" },
    withCredentials: true
});

Теперь все последующие вызовы m.request будут наследовать эти параметры, что упрощает работу с аутентификацией и общими заголовками.

Использование с компонентами Mithril

Данные, полученные через m.request, удобно интегрировать с состоянием компонента:

var UserList = {
    users: [],
    oninit: function() {
        m.request({ method: "GET", url: "/api/users" })
            .then(users => UserList.users = users);
    },
    view: function() {
        return m("ul", UserList.users.map(user => m("li", user.name)));
    }
};

Асинхронное получение данных и их автоматическое отображение в виртуальном DOM — один из ключевых подходов в Mithril.

Расширенные возможности

Кэширование запросов: можно комбинировать с m.prop для хранения и повторного использования данных.
Проверка статуса: через функцию extract можно реализовать централизованную обработку кодов состояния.
Поддержка разных форматов: кроме JSON, m.request позволяет работать с текстовыми, бинарными и другими форматами данных.

m.request({
    method: "GET",
    url: "/api/file",
    responseType: "blob"
}).then(function(blob) {
    console.log("Получен файл", blob);
});