Como usar a API busca em JavaScript

No desenvolvimento da web, você geralmente precisará se conectar/se comunicar com outros servidores da web para obter informações/dados. Por exemplo, ao se inscrever em uma nova conta em alguns sites, você costuma ver uma opção para se inscrever usando seu Gmail ou outras contas de terceiros. Isso permite que você se inscreva em uma nova conta com apenas um clique em vez de preencher manualmente todo o formulário. Quando você seleciona a opção "Inscreva -se usando uma conta de terceiros", o aplicativo se comunica com o servidor do aplicativo de terceiros e envia uma solicitação para acessar suas informações que são armazenadas lá. Esta solicitação é enviada através da API, que é um conjunto de regras que governam como diferentes aplicativos ou sistemas se comunicam. Neste artigo, aprenderemos a usar o JavaScript para enviar tais solicitações.

Qual é a API de busca

Buscar a API fornece uma simples buscar() Método em JavaScript, que é usado para buscar, acessando e manipulando recursos em toda a rede. O buscar() O método permite que você faça chamadas assíncronas de JavaScript e XML (AJAX) com JavaScript, que foram feitos anteriormente usando XMLHTTPREQUEST. Os pedidos assíncronos são paralelos ao programa principal e não interrompem a execução do código abaixo deles. O código abaixo da solicitação da API busca continuará funcionando mesmo que a API não tenha enviado nenhuma resposta de volta. Quando a API responde à chamada de Ajax, então o buscar() O método é retomado.

A API Fetch usa promessas e fornece recursos poderosos, o que facilita muito o manuseio de solicitações da Web e suas respostas; É uma ótima maneira de evitar infernos de retorno que foram criados ao usar xmlhttprequest.

Observação: O console do navegador é usado para a demonstração de exemplos neste artigo.

A sintaxe da API Fetch em JavaScript

Precisamos ligar para o buscar() Método para usar a API Fetch em nosso código JavaScript. O buscar() Método toma o URL da API como um argumento.

buscar (url)

Precisamos definir o então() método após o buscar() método:

.então (function ()
)

O valor de retorno do buscar() Método é uma promessa. Se essa promessa for resolvida, o código presente dentro do corpo do então() o método é executado. O corpo do então() O método deve conter o código que pode lidar com os dados enviados pela API.

Então precisamos definir o pegar() método; o pegar() O método é executado apenas caso a promessa seja rejeitada:

.Catch (function ()
);

Tudo em todo o buscar() O método deve parecer algo assim:

buscar (url)
.então (function ()
)
.Catch (function ()
);

Agora que entendemos a sintaxe da API buscar, agora podemos passar para os exemplos do mundo real de usar a busca() Método em uma API real.

Como usar o método Fetch para obter dados de uma API

Neste exemplo, usaremos uma API do usuário do GitHub para obter os dados de informações do usuário e exibi -los no console usando apenas Javascript de baunilha; então vamos começar:

Primeiro, criaremos uma variável chamada url; Esta variável manterá o URL da API que retornará os repositórios de um usuário chamado Fabpot:

const url = 'https: // API.Github.com/usuários/fabpot/repos ';

Agora vamos usar o buscar() Método para chamar a API do usuário do GitHub;

buscar (url)

O buscar() O método toma o URL como um argumento:

buscar (url)
.então (function (dados)
)
)
.Catch (function (Error)
);

No código dado acima, chamamos a API Fetch para obter os repositórios de um usuário nomeado Fabpot do github. Passamos o URL para a API do usuário do GitHub como um argumento para buscar API. A API então envia de volta uma resposta que é um objeto com uma série de métodos; Esses métodos podem ser usados ​​para executar diferentes funções nas informações recebidas. Se queremos converter o objeto em JSON, podemos usar o método json ().

Para converter o objeto em json, precisamos adicionar o então() método. O então() o método conterá uma função; A função levará um argumento chamado resposta:

buscar (url)
.então ((resposta) =>)

O parâmetro de resposta é usado para armazenar o objeto que é retornado da API. Este objeto é convertido em dados JSON usando o método json ():

buscar (url)
.então ((resposta) => resposta.JSON ())

Agora podemos produzir os dados na forma de JSON, adicionando outro então() declaração; Esta declaração contém uma função que toma uma variável denominada dados como um argumento:

.então (function (dados)
)
)

Nós então usamos o console.Método log () dentro do corpo da função para gerar os dados no console.

.então (function (dados)
console.log (dados);
)

Agora, adicionaremos a função Catch () para registrar o erro potencial ao console, caso a promessa não esteja realizada:

.Catch (err
console.erro (err);
);

Em todo o pedido, para obter uma lista dos repositórios do usuário do Github, deve se parecer com o seguinte:

buscar (url)
.então ((resposta) => resposta.JSON ())
.então ((dados) =>
console.log (dados);
)
.Catch (err
console.erro (err);
);

Na captura de tela dada acima, a promessa foi resolvida e o corpo do .então() o método foi executado. Se a promessa permanecesse não resolvida devido a algum motivo, o corpo do .pegar() Método teria sido executado, o que faria todo o tratamento de erros. Acabamos de usar o .pegar() Método para imprimir uma mensagem de erro caso a promessa não seja realizada.

Conclusão

Comunicar e buscar dados de fontes de terceiros é uma parte essencial do desenvolvimento da Web. Foi alcançado usando uma ferramenta complexa chamada XmlHttPrequest, que causou infernos a retorno de chamada; Agora, uma ferramenta muito mais simples chamada Fetch API é usada para enviar chamadas de Ajax no JavaScript de baunilha, pois é muito melhor em lidar com as solicitações de Ajax. Neste post, aprendemos a usar o método API busca para fazer chamadas de Ajax em JavaScript de baunilha.