How can I handle error 404 in async/await fetch API

Question

Is there any opurtinity to catch Error where there will be no data provided? I recevie Error 404 but can't for example console.log it...

class App extends React.Component{
  getWeather = async (e) => {
    e.preventDefault();

    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;

    const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);

    const data = await api_call.json();

    console.log(data);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Image error from Browser

`if (api_call.ok) { 200-299 }` `api_call.status` contains the status code — Endless, Aug 10 '18 at 07:24
In your screenshot the response is in the output, what do you mean by "I recevie Error 404 but can't for example console.log it" ? — gbalduzzi, Aug 10 '18 at 07:30

score 6 · Answer 1 · answered Aug 15 '19 at 00:44

Regardless of using async/await or promise chaining, the fetch API returns a promise containing a Response object. The response object contains a status property which returns an HTTP status code. Before you call the .json() method on your response object you can check to see if res.status === 200. For example, the OpenWeather API will return a HTTP status code of 200 for successful requests. So, to check if your API request was successful, you could do the following ...

class App extends React.Component{
  getWeather = async (e) => {
    e.preventDefault();

    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;

    const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);

    if (api_call.status !== 200) {
        // You can do your error handling here
    } else {
        // Call the .json() method on your response to get your JSON data
        const data = await api_call.json();
    }
  }

You can see more of the Response object properties and methods By viewing the MDN documentation

score 3 · Answer 2 · answered Aug 10 '18 at 07:28

3

Just examine the status property of the resolved promise before you try to extract the body with the .json() method.

async function test() {
  const api_call = await fetch(`https://cors-anywhere.herokuapp.com/http://example.com/fake/fake`);
  console.log(api_call.status);
}

test();

answered Aug 10 '18 at 07:28

Quentin

914,110
126
1,211
1,335

just a tip https://httpbin.org is a good site for cors and testing has stuff like https://httpbin.org/status/{xxx} – Endless Aug 10 '18 at 07:33

score 1 · Accepted Answer · answered Aug 10 '18 at 07:25

1

Try try catch:

getWeather = async (e) => {
    try {
        e.preventDefault();
        const city = e.target.elements.city.value;
        const country = e.target.elements.country.value;
        const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);
        const data = await api_call.json();
        console.log(data);
    } catch(e) {
        console.log('error: ', e);  
    }
}

answered Aug 10 '18 at 07:25

Faly

13,291
2
19
37

I would kinda like to see how `await` influences the need for the `try catch` block ;) – Icepickle Aug 10 '18 at 07:33
3

This one gives back same eror i had before – Paul Aug 10 '18 at 07:43

Jasmin Mistry · Answer 4 · 2018-08-10T08:10:18.657

1

Use

class App extends React.Component{
  getWeather = async (e) => {
    e.preventDefault();

    const city = e.target.elements.city.value;
    const country = e.target.elements.country.value;
    try {
        const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);

        const data = await api_call.json();
        console.log(data);
    } catch(e) {
       console.log(e);
    }

  }

edited Aug 10 '18 at 08:10

answered Aug 10 '18 at 07:26

Jasmin Mistry

1,459
1
18
23

Resolve of this is Error Failed to compile ./src/App.js Line 22: 'data' is not defined no-undef Search for the keywords to learn more about each error. – Paul Aug 10 '18 at 07:42

How can I handle error 404 in async/await fetch API

4 Answers4