Fetch/XMLHttpRequest em TypeScript

Este artigo explica Fetch/XMLHttpRequest em TypeScript.

Você pode aprender como usar a Fetch API e o XMLHttpRequest, bem como suas diferenças.

YouTube Video

Fetch/XMLHttpRequest em TypeScript

Em TypeScript, as solicitações HTTP são realizadas principalmente usando duas APIs: Fetch API e XMLHttpRequest. Ao usar TypeScript, você pode introduzir verificações de tipo para solicitações e respostas ao realizar comunicação assíncrona com essas APIs, permitindo escrever um código mais seguro. Abaixo, introduziremos como usar cada uma delas.

Fetch API

A Fetch API é uma API baseada em Promises usada para realizar comunicação assíncrona (solicitações HTTP) de forma simples. Em TypeScript, você pode fazer solicitações usando o método fetch e processar as respostas de maneira segura para tipos.

Uso Básico

Abaixo está um exemplo básico usando uma solicitação 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    });

• Este código envia uma solicitação GET para a URL especificada, analisa a resposta recebida como JSON e exibe o resultado no console.

Manipulação de dados com segurança de tipos em TypeScript

Como a resposta do método fetch tem um tipo indefinido, você pode aproveitar a verificação de tipos do TypeScript definindo explicitamente o tipo da resposta.

 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    });

• Este código aplica o tipo Post aos dados obtidos com fetch, processa a resposta de forma segura quanto ao tipo e exibe o título de cada post no console.

Exemplo de uma solicitação POST

Ao enviar dados para o servidor, use o método POST. Para enviar JSON no corpo da solicitação, especifique headers e 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    });

• Este código envia dados em formato JSON para o servidor com uma solicitação POST, recebe a resposta como JSON e exibe no console.

Fetch usando funções assíncronas (async/await)

Ao usar async/await em TypeScript, você pode escrever processamento assíncrono de maneira mais simples.

 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();

• Este código busca dados dos posts de forma assíncrona usando a sintaxe async/await, processa a resposta como do tipo Post[] e exibe no console.

XMLHttpRequest

XMLHttpRequest é uma API mais antiga e um pouco mais complexa em comparação com a Fetch API, mas pode ser usada quando compatibilidade com navegadores ou controle mais avançado são necessários.

Uso básico do XMLHttpRequest

Abaixo está um exemplo usando uma solicitação 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();

• Este código envia uma solicitação GET para a URL especificada usando XMLHttpRequest, analisa a resposta como JSON e exibe o resultado no console.

Exemplo de uma solicitação POST

Ao enviar dados ao servidor, especifique POST no método open e envie os dados com 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);

• Este código envia dados em formato JSON para o servidor com uma solicitação POST usando XMLHttpRequest e exibe no console a resposta contendo os dados criados.

Tratamento de erros com XMLHttpRequest

Você pode lidar com erros de solicitação usando o evento 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();

• Este código realiza uma solicitação GET com XMLHttpRequest, lida com erros de requisição usando onerror e registra adequadamente a resposta tanto em caso de sucesso quanto de falha.

Comparação entre Fetch API e XMLHttpRequest

Resumo

Em TypeScript, você pode escrever requisições assíncronas de forma concisa e com código seguro para tipos usando a Fetch API. Por outro lado, XMLHttpRequest é uma API mais antiga, mas pode ainda ser usada em certas situações. Geralmente, é recomendado usar a moderna e simples Fetch API, mas se for necessária compatibilidade com navegadores ou rastreamento de progresso, XMLHttpRequest também pode ser considerado.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video