I have an arrow function which returns some data from an api call. i want to wrap it up inside a try catch block like

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;
       }
  )

How could i do that? The perfectly working arrow function I have is

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

I have an arrow function which returns some data from an api call. i want to wrap it up inside a try catch block like

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;
       }
  )

How could i do that? The perfectly working arrow function I have is

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

• javascript
• function
• ecmascript-6
• promise
• arrow-functions

• 2 Why not simply use catch on fetch? – Arfeo Commented Mar 4, 2019 at 11:48
• 1 What error are you trying to catch. Failed .json()? – chriss Commented Mar 4, 2019 at 11:49
• 4 Btw, drop the pointless .then(names => names)! – Bergi Commented Mar 4, 2019 at 11:50
• 5 The actual problem is that you're using parentheses () not braces {} for the body of the arrow function - it only works in the second case because the body is a single expression. But also you should .catch a rejected promise. – jonrsharpe Commented Mar 4, 2019 at 11:51
• 1 Do you really want to return error from the catch block? That's not a good idea, you should handle the error there not sell it as a result. – Bergi Commented Mar 4, 2019 at 11:52

3 Answers 3

You can't use try catch on fetch because fetch is async while try catch is sync. Therefore your try catch will always pass. if we assume that you received response, and .json() fails, in second then first parameter is success function second one is fail function that executes when .json() fails

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 => {})

Like this when you call fetchEmployees in first function will be executed if everything succeed, otherwise second will execute with error response, in this case hard coded string "json failed"

Turn your function into an async one:

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;
  }
};

Try to use 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
   }
}