O segundo parâmetro em fetch()

Quando tentamos usar fetch()a função em classe, tendemos a usá-la para obter dados da API no site.

https://reqres.in/é um site que fornece APIs para desenvolvedores testarem seu código. Os desenvolvedores podem testar diferentes métodos HTTP e obter uma resposta real, mas com dados falsos (REQRES, 2023). Usaremos este site para testar nosso código várias vezes.

Por exemplo, podemos obter os dados falsos para saber o nome do usuário dehttps://reqres.in/com fetch().

Se você clicar no botão Test fetch() to Get data , o fetch tentará obter os dados de 'https://reqres.in/api/users/2'com o método GET. Você pode ver "Janet" anexado abaixo.

No entanto, a busca não pode ser usada apenas para buscar os dados. Ele possui um segundo parâmetro que pode permitir que você personalize o que deseja fazer com a função de busca.

É opcional , então você pode ignorá-lo totalmente e ainda funciona para obter os dados, assim como fizemos antes.

O segundo parâmetro deve ser um objeto . E dentro desse objeto, você pode incluir vários subparâmetros, incluindo corpo, cabeçalho, método… (MDN, 2023).

Existe um exemplo:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Então, como podemos usá-lo?

Neste exemplo, assim que os usuários clicarem no botão Postar teste, nosso aplicativo postará o nome do usuário e o trabalho no servidor. E haverá um registro de data e hora abaixo para informar aos usuários o horário de criação.

.catch((erro) =>{})

Como todos sabemos, a função fetch() retornará a Promise Object. No entanto, e se o servidor não responder e a promessa não for cumprida?

Haverá um erro!

Portanto, precisamos usar catch((error) => {})para capturar o erro para evitar falhas.

Vamos ver o código de exemplo.

Neste exemplo, recebi 'acidentalmente' o link errado. Então a promessa não será cumprida e haverá um erro. Portanto, se os usuários clicarem no botão Post de teste, o console imprimirá 'Erro!!!'.

Mais uso do objeto Response

Discutimos a situação quando há um erro e o Promise Object não é cumprido. Mas se o objeto de promessa retornado por fetch()for cumprido, ele retornará um objeto Response .

Existem algumas propriedades de instância (MDN, 2023):

• Resposta.ok
• Resposta.status
• Resposta.statusText
• Resposta.url
• …

Usei Response.status, que retorna o código de status HTTP, e Response.ok, que retorna um valor booleano , podemos ver se a busca foi bem-sucedida.

Para este exemplo, se os usuários clicarem no botão Test Post, haverá o código de status HTTP e um valor booleano para verificar se foi bem-sucedido.

Abortando uma busca

Os usuários também podem abortar uma busca usando o método AbortController Object.

Precisamos criar um AbortController Objectseparadamente.

let controller = new AbortController();

Portanto, nosso novo segundo parâmetro é:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

Eu defino um intervalo para fazer o abort (). Então, quando eu clicar em abortar primeiro, e Test Post lançará um AbortError no console. E o status e o código HTTP não serão mostrados no botão Test Post como fizemos antes.

Referência

MDN. (2023). Fetch() — APIs da web: MDN. APIs da Web | MDN. Recuperado em 31 de março de 2023, dehttps://developer.mozilla.org/en-US/docs/Web/API/fetch

REQUISITOS (2023). Uma API rest hospedada pronta para responder às suas solicitações Ajax. Requisitos Recuperado em 31 de março de 2023, dehttps://reqres.in/

MDN. (2023). Resposta — web apis: MDN. APIs da Web | MDN. Recuperado em 31 de março de 2023, dehttps://developer.mozilla.org/en-US/docs/Web/API/Response

MDN. (2023). Abortcontroller — web apis: MDN. APIs da Web | MDN. Recuperado em 31 de março de 2023, dehttps://developer.mozilla.org/en-US/docs/Web/API/AbortController