0

A API fetch provê ao navegador uma interface para a execução de requisições HTTP através de Promises.

A
Alfredo Neto
fetch(input: string, {
    method?: "GET" | "POST" | "PUT" | "DELETE",
    mode?: "navigate" | "same-origin" | "no-cors" | "cors",
    headers?: { [ key: string ]: any }
  }): Promise<Response>

Métodos

A lista a seguir descreve os métodos do objeto.

  • then - permite definir o bloco executado mediante o cumprimento de uma promise retornando um objeto do tipo Response.
  • catch - permite definir o bloco executado mediante a rejeição de uma promise

Na prática

Exemplo 1

Antes do Fetch as requisições HTTP eram feitas através do XMLHttpRequest. Neste exemplo faremos uma comparação da mesma requisição sendo feita em ambas APIs:


// requisição com o XMLHttpRequest
  const request = new XMLHttpRequest()

  request.open('GET', 'http://exemplo.com/usuario')

  request.onload = function () {
    console.log(JSON.parse(this.responseText))
  }

  request.onerror = function () {
    console.log('erro ao executar a requisição')
  }

  request.send()

Perceba que na linha 1 é instanciado o XMLHttpRequest a uma constante, e em seguida (linha 2) definimos o método e URL da requisição, para depois declarar dois callbacks: onload e onerror para ação de sucesso e erro, respectivamente. Ao final executamos a requisição com o send().

Todo esse processo torna a requisição complexa de ser feita, sem contar que não foi definido sequer um header no exemplo, por isso foi criado o Fetch, tornando a requisição HTTP mais simples, como podemos ver no exemplo reescrito.


// requisição com o Fetch



0
10

Comentários (0)

alfredo gelk neto

Brasil