Получение/XMLHttpRequest в TypeScript

В этой статье объясняется использование Fetch/XMLHttpRequest в TypeScript.

Вы узнаете, как использовать Fetch API и XMLHttpRequest, а также об их различиях.

YouTube Video

Получение/XMLHttpRequest в TypeScript

В TypeScript HTTP-запросы в основном выполняются с использованием двух API: Fetch API и XMLHttpRequest. С использованием TypeScript вы можете ввести проверки типов для запросов и ответов при выполнении асинхронной связи с этими API, что позволяет писать более безопасный код. Далее мы представим, как использовать каждый из них.

Fetch API

Fetch API — это API, основанный на промисах, который используется для простой реализации асинхронной связи (HTTP-запросов). В TypeScript вы можете выполнять запросы с помощью метода fetch и обрабатывать ответы безопасно с точки зрения типов.

Основное использование

Ниже приведен основной пример с использованием запроса GET.

 1const url = 'https://jsonplaceholder.typicode.com/posts';
 2
 3fetch(url)
 4    .then(response => {
 5        if (!response.ok) {
 6        throw new Error('Network response was not ok');
 7        }
 8        return response.json();  // Parse the response as JSON
 9    })
10    .then(data => {
11        console.log(data);
12    })
13    .catch(error => {
14        console.error('Fetch error:', error);
15    });

• Этот код отправляет запрос GET по указанному URL, анализирует полученный ответ как JSON и выводит его в консоль.

Обработка данных с защитой типов в TypeScript

Так как тип ответа от метода fetch неясен, вы можете воспользоваться проверкой типов в TypeScript, явно задав тип ответа.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12    .then(response => response.json())
13    .then((data: Post[]) => {
14        data.forEach(post => {
15            console.log(`Title: ${post.title}`);
16        });
17    })
18    .catch(error => {
19        console.error('Error fetching data:', error);
20    });

• Этот код применяет тип Post к данным, полученным с помощью fetch, обрабатывает ответ с учетом типов и выводит заголовок каждого поста в консоль.

Пример запроса POST

При отправке данных на сервер используйте метод POST. Чтобы отправить JSON в теле запроса, укажите headers и body.

 1const postData = {
 2    title: 'foo',
 3    body: 'bar',
 4    userId: 1
 5};
 6
 7fetch('https://jsonplaceholder.typicode.com/posts', {
 8        method: 'POST',
 9        headers: {
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify(postData)
13    })
14    .then(response => response.json())
15    .then(data => {
16        console.log('Created post:', data);
17    })
18    .catch(error => {
19        console.error('Error posting data:', error);
20    });

• Этот код отправляет данные в формате JSON на сервер с помощью запроса POST, получает ответ в формате JSON и выводит его в консоль.

Fetch с использованием асинхронных функций (async/await)

Используя async/await в TypeScript, вы можете писать асинхронный код более просто.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9async function fetchPosts() {
10    try {
11        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12        if (!response.ok) {
13            throw new Error('Network response was not ok');
14        }
15        const data: Post[] = await response.json();
16        console.log(data);
17    } catch (error) {
18        console.error('Fetch error:', error);
19    }
20}
21
22fetchPosts();

• Этот код асинхронно получает данные постов с использованием синтаксиса async/await, обрабатывает ответ как тип Post[] и выводит его в консоль.

XMLHttpRequest

XMLHttpRequest — это устаревший API, который несколько сложнее, чем Fetch API, но его можно использовать, если требуется совместимость с браузерами или более сложное управление.

Основы использования XMLHttpRequest

Ниже приведен пример использования запроса GET.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onreadystatechange = function () {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8    }
 9};
10
11xhr.send();

• Этот код отправляет запрос GET по указанному URL с помощью XMLHttpRequest, анализирует ответ как JSON и выводит его в консоль.

Пример запроса POST

При отправке данных на сервер укажите POST в методе open и отправьте данные с помощью send.

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4
 5const postData = JSON.stringify({
 6    title: 'foo',
 7    body: 'bar',
 8    userId: 1
 9});
10
11xhr.onreadystatechange = function () {
12    if (xhr.readyState === 4 && xhr.status === 201) {
13        console.log('Created post:', xhr.responseText);
14    }
15};
16
17xhr.send(postData);

• Этот код отправляет данные в формате JSON на сервер с помощью запроса POST через XMLHttpRequest и выводит в консоль ответ, содержащий созданные данные.

Обработка ошибок с использованием XMLHttpRequest

Вы можете обрабатывать ошибки запросов с помощью события onerror.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onerror = function () {
 5    console.error('Request failed');
 6};
 7
 8xhr.onload = function () {
 9    if (xhr.status === 200) {
10        console.log('Response:', xhr.responseText);
11    } else {
12        console.error('Error:', xhr.status);
13    }
14};
15
16xhr.send();

• Этот код выполняет запрос GET с помощью XMLHttpRequest, обрабатывает ошибки запроса с помощью onerror и корректно регистрирует ответ как при успехе, так и при ошибке.

Сравнение Fetch API и XMLHttpRequest

Резюме

В TypeScript можно писать асинхронные запросы лаконично и с типобезопасным кодом, используя Fetch API. С другой стороны, XMLHttpRequest — это устаревший API, но его всё ещё можно использовать в некоторых случаях. Как правило, рекомендуется использовать простой и современный Fetch API, но если требуется совместимость с браузерами или отслеживание прогресса, можно рассмотреть XMLHttpRequest.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video