Como buscar dados em Javascript como um profissional

A API de fetch nos permite criar uma solicitação HTTP para realizar várias coisas em Javascript — como recuperar dados de uma API, postar dados em um servidor ou até mesmo obter todo o conteúdo de uma página da web. Essa solicitação HTTP recuperará dados de forma assíncrona da URL fornecida e gerará algum tipo de resposta HTTP. Vejamos como funciona.

A função fetch() é uma função global e é usada com mais frequência para interagir com APIs. Se você é novo nisso, você não está sozinho - então vamos dar uma olhada em como fetch() funciona.

Usando busca em Javascript

O uso mais básico de busca requer um argumento — a URL que queremos buscar. Como a fetch gera solicitações HTTP, sempre temos que fornecer uma URL:

 let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res });

Como o resultado de uma busca é assíncrono, podemos usar then() para capturar a resposta e fazer algo com ela. O legal sobre o res ou resposta retornado é que ele possui vários métodos integrados, que nos permitem analisar imediatamente o conteúdo que obtemos de fetch :

• res.text() - retorna o conteúdo de texto de uma URL. Se for um site, ele retorna o HTML.
• res.json() - retorna dados JSON formatados, se existirem.
• res.blob() - retorna dados de blob, se houver.
• res.arrayBuffer() - retorna dados arrayBuffer, se houver.
• res.formData() - retorna dados formData, se houver.

Como diferentes URLs produzem diferentes tipos de conteúdo, os métodos acima nos permitem analisar esse conteúdo da maneira que quisermos. Para entender como tudo isso funciona, vejamos dois exemplos muito comuns.

Exemplo 1: obtenha o conteúdo HTML de um site usando a busca de Javascript

Conforme mencionado acima, res.text() nos fornece o conteúdo de texto de uma URL - para que possamos usá-lo para obter todo o conteúdo HTML de uma URL. Assim que pegarmos nossa resposta usando res.text() , podemos pegar a resposta com outro then , nos permitindo baixar e retornar o conteúdo da URL fornecida:

 let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => { return data; }); // Now contains our website's HTML.

Se o link não existir ou ocorrer um erro, nosso objeto de response conterá um erro. Por exemplo, uma página não encontrada retornará 404 , ou um erro de gateway incorreto retornará 502 .

Exemplo 2: obter JSON por meio de busca de Javascript

Se o conteúdo de uma URL consistir em JSON, podemos usar o res.json() . O código a seguir, por exemplo, retornará um objeto JSON da URL, supondo que a URL esteja enviando um JSON válido de volta:

 let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { return data; }); // Now contains a JSON object - assuming one exists

Opções para busca de Javascript

Também é importante entender as opções disponíveis em fetch. Eles vêm depois da URL, como um objeto — ou seja fetch(URL, { options }) . Se você já trabalhou com solicitações HTTP antes, algumas podem ser familiares. A função de fetch exibida abaixo contém todas as opções possíveis que você pode usar:

 fetch("https://fjolt.com/", { body: JSON.stringify({ someData: "value" }) method: 'POST' mode: 'cors' cache: 'no-cache' credentials: 'same-origin' headers: { 'Content-Type': 'application/json' }, redirect: 'follow' referrerPolicy: 'no-referrer' });

E aqui está um resumo do que cada um deles significa:

• body contém o corpo do texto. Neste exemplo, estamos enviando algum JSON, que precisa ser stringificado.
• é um method HTTP padrão. Pode ser POST / GET / DELETE / PUT / CONNECT / PATCH / TRACE / OPTIONS .
• mode refere-se a se as solicitações de origem cruzada são aceitas. Pode ser cors / no-cors / same-origin .
• cache refere-se a como o navegador irá interagir com o cache. Pode ser default / no-cache / reload / force-cache / only-if-cached .
• as credentials referem-se a se os cookies de origem cruzada devem ser enviados com a solicitação. Pode ser include / same-origin / omit .
• headers contém qualquer cabeçalho associado à solicitação. Ele pode conter qualquer cabeçalho HTTP - por exemplo, aqui mostra Content-Type - mas você também pode ter cabeçalhos HTTP personalizados.
• redirect determina o que acontece se o URL buscado for redirecionado. Pode ser follow / error / manual .
• referrerPolicy determina quantas informações do referenciador são transmitidas com a solicitação. Pode ser no-referrer / no-referrer-when-downgrade / origin / origin-when-cross-origin / same-origin / strict-origin / strict-origin-when-cross-origin / unsafe-url .

Lembre-se, a busca de Javascript é assíncrona

Quando usamos o fetch, ele vai para a URL, coleta as informações e nos fornece uma response . Isso não é imediato, pois carregar a URL, baixá-la e trazê-la de volta leva tempo. Se simplesmente executarmos fetch sozinho, um log do console imediatamente após ele retornará apenas um Promise , não a response da URL que queremos:

 let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending>

Isso acontece porque a função fetch() é executada, mas o Javascript não espera pela response . Como tal, temos que dizer explicitamente ao Javascript para esperar por isso, se quisermos acessar a response .

Existem duas maneiras de esperar por fetch() :

• Podemos usar then e manipular a resposta de nosso fetch() dentro de then() .
• Podemos usar await e aguardar o retorno da busca antes de usar seu conteúdo.

Usando then para aguardar uma busca em Javascript

Usar then é frequentemente usado para capturar e processar respostas de fetch. O conteúdo de fetch() pode ser manipulado dentro da função callback then() , mas não fora dela. Por exemplo:

 let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { console.log(data); // We can do anything with the data from our api here. return data; }); console.log(apiResponse); // This will return Promise<Pending> // That means we can't use the apiResponse variable // outside of the then() function.

Se quisermos usar o conteúdo de fetch() fora de then , temos que usar await .

Usando await para aguardar uma busca em Javascript

A outra maneira de esperar por uma busca é usar a palavra-chave await . A maioria dos navegadores modernos oferece suporte a awaits de nível superior , mas se você estiver preocupado com o suporte ou usando uma versão do Node.JS anterior a 14.8, convém agrupar qualquer código await em uma async function .

Se usarmos await, podemos usar a resposta de nossa API em qualquer lugar em nossa função ou código e usar qualquer função de response , como text() ou json() nela. Por exemplo:

 // Typically we wrap await in an async function // But most modern browsers and Node.JS support // await statements outside of async functions now. async getAPI() { let apiResponse = await fetch("https://fjolt.com/api"); let response = apiResponse.json(); // Since we waited for our API to respond using await // The response variable will return the response from the API // And not a promise. console.log(response); } getAPI();

Se você quiser aprender mais sobre operações assíncronas, leia nosso tutorial sobre Javascript assíncrono aqui .

Conclusão

Neste guia, vimos como a busca funciona. Mostramos as diferentes opções que você pode enviar com suas solicitações fetch() e como aguardar a resposta usando conceitos assíncronos em Javascript. fetch() é uma ferramenta incrivelmente poderosa em Javascript e é usada frequentemente em grandes produtos o tempo todo. Espero que você tenha gostado deste artigo.