3

Galera tenho o seguinte código e gostaria de saber como consigo implementar um try / catch com async / await executando a mesma função:

import Vue from 'vue'
import axios from 'axios'

new Vue({
  el: '#app',
  data: {
    skills: [],
  },
  mounted() {
    axios
      .get('http://localhost:8080/wp-json/api/v1/skills')
      .then(response => {
        this.skills = response
      }).catch(err => (console.log(err)))
  }
})

Obrigado!

4
  • Olá wDrik, qual é a necessidade de usar try/catch? A promise já faz isso por tí. Que parte do código queres proteger contra um erro?
    – Sergio
    21/05/2018 às 5:29
  • Mano é que eu estou usando owl.carousel para exibir os dados que estão retornando.. só que o as vezes o carousel carega antes dos items por completo e isso buga o layout.. já coloque um timeOut.. msm assim ñ resolveu.. pensei que um async await poderia ajudar! vlw!
    – wDrik
    21/05/2018 às 11:37
  • Você provavelmente preenche o carousel com os dados do array skills certo? Tente colocar um v-if="skills.length" provavelmente já resolve este problema, sem necessidade de try catch ou timeout. Se quiser poste o código todo que tento mais tarde. 21/05/2018 às 16:29
  • Blz, man já entendi a lógica.. então usar um try, catch com async/await deve ser para um caso mais expecifíco ? Vlw!
    – wDrik
    21/05/2018 às 18:40

1 Resposta 1

8

Caso queira aplicar o async no código do mounted você pode faze-lo da seguinte forma:

...
async mounted() {
  try {
    let response = await axios.get('http://localhost:8080/wp-json/api/v1/skills');
    this.skills = response;
  } catch(e) {
    console.error(e);
  }
}
...

Funções assíncronas

A declaração async function define uma função assíncrona, que retorna um objeto AsyncFunction.

Você também pode definir funções assíncronas usando uma expressão async function.

Quando uma função assíncrona é chamada, ela retorna uma Promise. Quando a função assíncrona retorna um valor, a Promise será resolvida com o valor retornado. Quando a função assíncrona lança uma exceção ou algum valor, a Promise será rejeitada com o valor lançado.

Uma função assíncrona pode conter uma expressão await, que pausa a execução da função assíncrona e espera pela resolução da Promise passada, e depois retoma a execução da função assíncrona e retorna o valor resolvido.

Exemplo Simples

function resolverDepoisDe2Segundos(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function adicionar1(x) {
  var a = resolverDepoisDe2Segundos(20);
  var b = resolverDepoisDe2Segundos(30);
  return x + await a + await b;
}

adicionar1(10).then(v => {
  console.log(v);  // exibe 60 depois de 2 segundos.
});

async function adicionar2(x) {
  var a = await resolverDepoisDe2Segundos(20);
  var b = await resolverDepoisDe2Segundos(30);
  return x + a + b;
}

adicionar2(10).then(v => {
  console.log(v);  // exibe 60 depois de 4 segundos.
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .