2
votes

Comment envelopper un bloc try catch dans une fonction de flèche pour appeler une API?

J'ai une fonction de flèche qui renvoie des données à partir d'un appel API. Je veux l'envelopper dans un bloc try catch comme

const fetchEmployees = () => (
fetch('http://localhost:6873/api/values', {
    method: 'GET',
    headers: {
        'content-type': 'application/json'
    }
})
    .then(response => response.json())
    .then(names => names )
)

Comment puis-je faire cela? La fonction de flèche qui fonctionne parfaitement est

const fetchEmployees = () => (
   try{
       fetch('http://localhost:6873/api/values', {
          method: 'GET',
          headers: {
            'content-type': 'application/json'
          }
       })
         .then(response => response.json())
         .then(names => { return names })
       } catch (error) {
           return error;
       }
  )

javascript ecmascript-6 function arrow-functions promise

11 commentaires

Pourquoi ne pas simplement utiliser catch sur fetch ?

Quelle erreur essayez-vous d'attraper. Échec de .json ()?

Je suis nouveau à promettre pouvez-vous élaborer? @arfeo

oui quelque chose comme ça @chriss

Btw, laissez tomber l'inutile .then (names => names) !

Le problème réel est que vous utilisez des parenthèses () et non des accolades {} pour le corps de la fonction de flèche - cela ne fonctionne que dans le deuxième cas car le corps est une seule expression. Mais vous devez également .catch une promesse rejetée.

Voulez-vous vraiment renvoyer une erreur à partir du bloc catch ? Ce n'est pas une bonne idée, vous devriez gérer l'erreur là-bas et ne pas la vendre en conséquence.

l'erreur réelle est que vous ne pouvez pas utiliser try catch on async processus, j'ai ajouté la réponse ci-dessous, j'espère que cela clarifiera ce qui se passe

'content-type': 'application / json' est absurde. Vous faites une demande GET. Il n'y a pas de contenu pour décrire le type de.

Oui, c'était une erreur, mais je suis devenu indéfini avec cette approche. @jonrsharpe

merci pour le lien @Bergi

3 Réponses :

1
votes

Essayez d'utiliser async / await

const fetchEmployees = async () => {
   try {
       let response = await fetch('http://localhost:6873/api/values', {
          method: 'GET',
          headers: {
            'content-type': 'application/json'
          }
       });
       let json = await response.json();   
       return json;    
   } catch (error) {
     return error
   }
}

0 commentaires

2
votes

Transformez votre fonction en une fonction asynchrone :

const fetchEmployees = async () => {
  try {
    const response = await fetch("http://localhost:6873/api/values", {
      method: "GET",
      headers: {
        "content-type": "application/json"
      }
    });

    const names = await response.json();

    return names;
  } catch (error) {
    return error;
  }
};

0 commentaires

2
votes

Vous ne pouvez pas utiliser try catch lors de la récupération, car la récupération est asynchrone tandis que try catch est sync. Par conséquent, votre prise d'essai passera toujours. si nous supposons que vous avez reçu une réponse et que .json () échoue, dans le second puis le premier paramètre est la fonction de réussite, le second est la fonction d'échec qui s'exécute lorsque .json () échoue

const fetchEmployees = () => (
  fetch('http://localhost:6873/api/values', {
      method: 'GET',
      headers: {
          'content-type': 'application/json'
      }
  })
      .then(response => response.json())
      .then(names => names, error => "json failed" )
)

fetchEmployees().then(success => {}, error => {})

Comme ça vous appelez fetchEmployees dans la première fonction sera exécutée si tout réussit, sinon la seconde s'exécutera avec une réponse d'erreur, dans ce cas la chaîne codée en dur "json a échoué"

0 commentaires