Usando assíncronos/aguardar em javascript com exemplos
- 773
- 191
- Arnold Murray
Async/Wait é um recurso do JavaScript que permite aos desenvolvedores escrever código assíncrono de uma maneira mais síncrona. Com o Async/Wait, os desenvolvedores podem escrever código que aguarda a conclusão de uma operação assíncrona, sem bloquear o segmento principal da execução.
Neste artigo, exploraremos como usar o Async/Aguardar em JavaScript com alguns exemplos.
Sintaxe de assíncrona/aguardar
A sintaxe de assíncrono/aguardar é bastante simples. Para definir uma função assíncrona, você adiciona a palavra -chave assíncrona antes da palavra -chave da função, assim:
Função assíncrona getData () // Código assíncrono vai aqui| 123 | Função assíncrona getData () // Código assíncrono vai aqui |
Dentro de assíncrono Função, você pode usar a palavra -chave aguarda para aguardar uma promessa de resolver, assim:
Função assíncrona getData () const Response = Aguarda Fetch ('https: // API.exemplo.com/dados '); const dados = aguardar resposta.json (); retornar dados;| 12345 | Função assíncrona getData () const Response = Aguarda Fetch ('https: // API.exemplo.com/dados '); const dados = aguardar resposta.json (); retornar dados; |
Neste exemplo, usamos a função Fetch para fazer uma solicitação HTTP e, em seguida. Em seguida, usamos a palavra -chave aguardar novamente para esperar que os dados do JSON sejam analisados antes de devolvê -los.
Exemplo: buscando dados de uma API usando async/aguardar
Vamos dar uma olhada em como usar async/aguarda para buscar dados de uma API. Neste exemplo, usaremos a função Fetch para fazer uma solicitação HTTP à API do GitHub e depois usar o Async/aguarda para esperar que a resposta seja devolvida.
função assíncrona fetchgithubuser (nome de usuário) const url = 'https: // api.Github.com/usuários/$ nome de usuário '; const Response = aguarda buscar (URL); const dados = aguardar resposta.json (); retornar dados; fetchgithubuser ('Octocat') .então (dados => console.log (dados))) .captura (erro => console.erro (erro));| 12345678910 | função assíncrona fetchgithubuser (nome de usuário) const url = 'https: // api.Github.com/usuários/$ nome de usuário '; const Response = aguarda buscar (URL); const dados = aguardar resposta.json (); Dados de retorno; fetchgithubuser ('Octocat') .então (dados => console.log (dados))) .captura (erro => console.erro (erro)); |
Neste exemplo, definimos uma função assíncrona chamada Fetchgithubuser Isso leva um nome de usuário do github como seu parâmetro. Dentro da função, construímos o URL para a solicitação da API, usamos a função Fetch para fazer a solicitação e depois usamos a palavra -chave aguardar para esperar que a resposta seja devolvida. Em seguida, usamos a palavra -chave aguardar novamente para esperar que os dados do JSON sejam analisados antes de devolvê -los.
Para chamar a função assíncrona, usamos a sintaxe da promessa padrão, com um .então() método para lidar com o caso de sucesso e um .pegar() Método para lidar com quaisquer erros.
Exemplo: Usando promessas com assíncronas/aguardar
Às vezes, pode ser necessário usar promessas com async/aguardar. Neste exemplo, usaremos o Promessa.todos() Método para fazer várias solicitações de API em paralelo e depois usar async/aguarde para esperar que todos os pedidos sejam concluídos antes de continuar.
| 1234567891011121314151617 | função assíncrona fetchgithubdata () const urls = ['https: // api.Github.com/usuários/octocat ',' https: // API.Github.com/usuários/mojombo ',' https: // api.Github.com/usuários/Defunkt ']; Const Promises = URLs.mapa (url => busca (url)); Const Responses = Aguardar promessa.todos (promessas); const data = aguarda promessa.Todos (respostas.mapa (resposta => resposta.json ())); Dados de retorno; fetchgithubdata () .então (dados => console.log (dados))) .captura (erro => console.erro (erro)); |
Neste exemplo, definimos uma função assíncrona chamada fetchgithubdata que constrói uma variedade de URLs de solicitação de API e depois usa o mapa() Método para criar uma variedade de promessas que buscarão os dados de cada URL. Nós então usamos o Promessa.todos() método para esperar que todos os pedidos sejam concluídos antes de continuar.
Depois de recebermos todas as respostas, usamos o mapa() Método novamente para criar uma variedade de promessas que analisarão os dados JSON de cada resposta. Em seguida, usamos a palavra -chave aguarda novamente para aguardar todas essas promessas para concluir antes de devolver os dados como uma variedade de objetos.
Práticas recomendadas para usar async/aguardar
Aqui estão algumas práticas recomendadas para usar o Async/Await em seu código JavaScript:
- Sempre lide com erros: O código assíncrono pode ser propenso a erros, por isso é importante sempre lidar com eles corretamente. Você pode usar tente/capturar blocos para capturar erros dentro de uma função assíncrona, ou você pode usar o
.pegar()Método em uma promessa de lidar com erros no código de chamada. - Não use demais async/aguarde: Embora o assíncrono/aguardo possa facilitar a leitura e a escrita do código assíncrono, nem sempre é necessário ou apropriado. Use apenas assíncrono/aguardar quando você precisa esperar uma promessa de resolver antes de continuar.
- Use promessa.todos () para solicitações paralelas: Se você precisar fazer várias solicitações de API em paralelo, use o
Promessa.todos()método para esperar que todos os pedidos sejam concluídos antes de continuar. - Não bloqueie o tópico principal: Lembre -se de que o código assíncrono deve ser executado em segundo plano; portanto, evite bloquear o segmento principal da execução. Se o seu código levar muito tempo para ser executado, considere usar um trabalhador da web para executá -lo em segundo plano.
- Mantenha as funções pequenas e focadas: Como em qualquer função, é importante manter as funções assíncronas pequenas e focadas. Se uma função estiver fazendo muito, considere dividi -la em funções menores e mais focadas.
Conclusão
Async/Await é uma característica poderosa do JavaScript que pode facilitar a leitura do código assíncrono. Ao usar a palavra -chave aguarda para aguardar as promessas de resolver, você pode escrever código que parece e se sente mais com código síncrono. Lembre -se de lidar com erros corretamente, use promessa.todos () para solicitações paralelas e evite bloquear o fio principal da execução.