javascript - How to wrap a try catch block inside an arrow function to call an api? - Stack Overflow

admin管理员组

文章数量:1345171

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

Share Improve this question Follow edited Mar 4, 2019 at 12:46 Raihan Ridoy asked Mar 4, 2019 at 11:46 Raihan RidoyRaihan Ridoy 78811 gold badge88 silver badges2121 bronze badges 11

• 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

 |  Show 6 more ments

3 Answers 3

Sorted by: Reset to default 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
   }
}

本文标签： javascriptHow to wrap a try catch block inside an arrow function to call an apiStack Overflow