A API de nos permite criar uma solicitação HTTP para realizar várias coisas em — 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. fetch Javascript A função é 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 funciona. fetch() fetch() Usando busca em Javascript O uso mais básico de busca requer um argumento — a URL que queremos buscar. Como a gera solicitações HTTP, sempre temos que fornecer uma URL: fetch let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res }); Como o resultado de uma busca é assíncrono, podemos usar para capturar a resposta e fazer algo com ela. O legal sobre o ou resposta retornado é que ele possui vários métodos integrados, que nos permitem analisar imediatamente o conteúdo que obtemos de : then() res fetch - retorna o conteúdo de texto de uma URL. Se for um site, ele retorna o HTML. res.text() - retorna dados JSON formatados, se existirem. res.json() - retorna dados de blob, se houver. res.blob() - retorna dados arrayBuffer, se houver. res.arrayBuffer() - retorna dados formData, se houver. res.formData() 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, 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 , podemos pegar a resposta com outro , nos permitindo baixar e retornar o conteúdo da URL fornecida: res.text() res.text() then 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 conterá um erro. Por exemplo, uma página não encontrada retornará , ou um erro de gateway incorreto retornará . response 404 502 Exemplo 2: obter JSON por meio de busca de Javascript Se o conteúdo de uma URL consistir em JSON, podemos usar o . 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: res.json() 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 . Se você já trabalhou com solicitações HTTP antes, algumas podem ser familiares. A função de exibida abaixo contém todas as opções possíveis que você pode usar: fetch(URL, { options }) fetch 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: contém o corpo do texto. Neste exemplo, estamos enviando algum JSON, que precisa ser stringificado. body é um HTTP padrão. Pode ser / / / / / / / . method POST GET DELETE PUT CONNECT PATCH TRACE OPTIONS refere-se a se as solicitações de origem cruzada são aceitas. Pode ser / / . mode cors no-cors same-origin refere-se a como o navegador irá interagir com o cache. Pode ser / / / / . cache default no-cache reload force-cache only-if-cached as referem-se a se os cookies de origem cruzada devem ser enviados com a solicitação. Pode ser / / . credentials include same-origin omit contém qualquer cabeçalho associado à solicitação. Ele pode conter qualquer cabeçalho HTTP - por exemplo, aqui mostra - mas você também pode ter cabeçalhos HTTP personalizados. headers Content-Type determina o que acontece se o URL buscado for redirecionado. Pode ser / / . redirect follow error manual determina quantas informações do referenciador são transmitidas com a solicitação. Pode ser / / / / / / / . referrerPolicy 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 . 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 , não a da URL que queremos: response Promise response let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending> Isso acontece porque a função é executada, mas o Javascript não espera pela . Como tal, temos que dizer explicitamente ao Javascript para esperar por isso, se quisermos acessar a . fetch() response response Existem duas maneiras de esperar por : fetch() Podemos usar e manipular a resposta de nosso dentro de . then fetch() then() Podemos usar e aguardar o retorno da busca antes de usar seu conteúdo. await Usando then para aguardar uma busca em Javascript Usar é frequentemente usado para capturar e processar respostas de fetch. O conteúdo de pode ser manipulado dentro da função callback , mas não fora dela. Por exemplo: then fetch() then() 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 fora de , temos que usar . fetch() then await Usando await para aguardar uma busca em Javascript A outra maneira de esperar por uma busca é usar a palavra-chave . A maioria dos navegadores modernos oferece suporte a , 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 em uma . await awaits de nível superior await 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 , como ou nela. Por exemplo: response text() json() // 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 e como aguardar a resposta usando conceitos assíncronos em Javascript. é uma ferramenta incrivelmente poderosa em Javascript e é usada frequentemente em grandes produtos o tempo todo. Espero que você tenha gostado deste artigo. fetch() fetch()
