How to wrap a try catch block inside an arrow function to call an api?

Question

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

Btw, [drop the pointless `.then(names => names)`](https://stackoverflow.com/q/41089122/1048572)! — Bergi, Mar 04 '19 at 11:50
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, Mar 04 '19 at 11:51
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, Mar 04 '19 at 11:52
actual error is that you cant use try catch on async process, I added response bellow, hope it will clarify what is happening — chriss, Mar 04 '19 at 11:55
`'content-type': 'application/json'` is nonsense. You are making a GET request. There is no content to describe the type of. — Quentin, Mar 04 '19 at 11:58
Yeah that was a mistake, but i got undefined as result with that approach. @jonrsharpe — Raihan Ridoy, Mar 04 '19 at 12:05

score 3 · Accepted Answer · answered Mar 04 '19 at 11:54

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"

nem035 · Answer 2 · 2019-03-04T11:49:42.603

2

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

edited Mar 04 '19 at 11:49

answered Mar 04 '19 at 11:49

nem035

34,790
6
87
99

score 1 · Answer 3 · answered Mar 04 '19 at 11:48

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

How to wrap a try catch block inside an arrow function to call an api?

3 Answers3