JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch

JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch
Publicado em 27/04/2021 13h54
Visualizações: 352

Fetch de BTC no projeto prático

Para este exemplo, será utilizado o conteúdo do projeto prático. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

Para baixar o projeto, clique aqui.

Neste post, será realizado um fetch para uma API externa da Blockchain.com (https://blockchain.info/ticker). Esta API retorna em json os valores da cotação de Bitcoin em diferentes moedas:

JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch

Um valor tendo este retorno como referência será incluído na lista de contato, em um texto de doação. O valor retorno pelo fetch será incluído um um span desta lista, de classe "bt-price". A inclusão de item de lista e o estilo, editado no arquivo base.css (variável do background contida neste), são de acordo com as imagens abaixo:

JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch
JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch
JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch

Agora, utilizando modules, será exportada uma função bitcoinFetch de um arquivo bitcoin-fetch.js importado no script.js. Está função realizará o fetch para a API do Blockchain utilizando promise. Erros serão tratados com o catch. O código em si é bem básico, mas exemplifica bem o consumo de uma API externa.

JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch

Utilizando a propriedade o valor "sell" do objeto "BRL", retornado do fetch transformado em json, atribuiremos este à constante btcPrice como innerText, selecionado o span através da classe "btc-price". O método toFixed foi utilizado para arredondar um número de casas decimais da divisão de mil pelo valor de venda do bitcoin.

O código final ficou da seguinte forma:

JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch

O resultado final, retornando o valor de R$ 1.000,00 convertido em BTC:

JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch

Para baixar o projeto, clique aqui.

Para visualizar o projeto, clique aqui.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.