Catch fetch error does not work as I need

Question

I'm implementing loading of files (JSON files in this case) using fetch. I found this solution to catch any error (in my case, the error would be that there is no such file, which is a normal possible condition).

The piece of code I'm using is:

fetch(l_Real_Reference).then(
    response => {
        if (response.ok) {
        return response.json(); } 

        throw new Error('Could not load file (there is no file)');
    })
    .catch((error) => {
        console.log("Catched error: " + error)
        return ;
      })
      
.then(data => {
    if (p_What == "Master_Index") {
        G_All_Albums = JSON.parse(JSON.stringify(data)) ;
        Populate_Albums_List() ;
    }

When attempting to load an file that does not exist (as yet!), the error shown in the console is:

As can be seen, the catch is activated but the flow of the code is still terminated.

What needs to be changed in the presented code such that the normal flow of the code is not disrupted?

Your last `.then()` gets `undefined` as the value of `data` because your `.catch()` callback returns that. I don't know what the point of the `JSON.parse(JSON.stringify())` is, but you need to verify that `data` has a value. — Pointy, Aug 22 '23 at 12:13
The flow _isn't_ terminated. It continues to the next then callback (because you explicitly handled the error) which then fails for exactly the reason the error says. — jonrsharpe, Aug 22 '23 at 12:13
What did you intend `return ;` to do in the `catch` callback? — Bergi, Aug 22 '23 at 12:30
@Pointy `JSON.parse(JSON.stringify())` sounds like deep copy? — Justinas, Aug 22 '23 at 12:33
@Justinas what would be the point? The object presumably just arrived from an HTTP request.\ — Pointy, Aug 22 '23 at 12:35
@Pointy, thanks for your reply. According to what the console shows, there is an error (404) even before the catch is reached (unless if what is shown in the console is not timely following the sequence of events). As per JSON.parse(JSON.stringify), yes, it is copying the contents of the source JSON to a global variable (I know many people would disagree with this, but I like it and it is a matter of taste I think). Incidentally, I did some changes to the code and now it would appear works as I need. I'm updating posting an answer with the new piece of code. — FDavidov, Aug 22 '23 at 13:41
Well copy the data all you want, but it's completely pointless. — Pointy, Aug 22 '23 at 13:52
@Pointy, perhaps, but this is something I do to avoid situations where things are overridden (and very difficult to debug). It served me well for quite a long time. And again, matter of taste. — FDavidov, Aug 22 '23 at 14:02

score -1 · Answer 1 · answered Aug 22 '23 at 13:46

Well, somehow the code now appears to work as I need. I'm posting it hereinafter:

fetch(l_Real_Reference).then(
    response => {
        if (response.ok) {
        return response.json(); } 

        throw new Error('Could not load file (there is no file)');
    })
    .catch((error) => {
        console.log("Catched error: " + error)
        return ;
      })
      
.then(data => {
    if (p_What == "Master_Index") {
        G_All_Albums = JSON.parse(JSON.stringify(data)) ;
        Populate_Albums_List() ;
    }
    else if ((typeof data != "undefined") &&
             (p_What      == "One_Album")    ) {
        G_All_Albums[p_Index].Media_Files = [] ;
        G_All_Albums[p_Index].Media_Files = JSON.parse(JSON.stringify(data)) ;

Thanks to those who posted comments and suggested steps and/or made me think again.

Catch fetch error does not work as I need

1 Answers1