How to stop fetch from executing if previous the fetch errored?

Question

I have the following code

const result = fetch(`link`${id})
    .then(response => response.json())
    .then(data => {
      let link;
      if (data && data.url) {
        link = data.url.href;
      }

      return fetch(link);
    })
    .then(response => response.json())
    .catch(() => {
        //do something
    });

  result
    .then(data => {
      let link;
      if (data && data.url1) {
        link = data.url1.href;
      }

      return fetch(link);
    })
    .then(response => response.json())

I'm making the call to the const result = fetch('link') and result.then depends on the result of the result.

But for some ids the original fetch is returned with error and I'm doing something in catch for that.

The question is how can I stop the next then on result so that If it returned with error the extra request won't be made? (because this request only causes an error)

@Anuga tried it - result is ```Promise {}``` event if I ```return false``` from ```catch``` — Person, Aug 15 '19 at 10:53
that's cause your not waiting for the promise to finish before executing `result.` — Anuga, Aug 15 '19 at 10:54
@Anuga but how do I wait for it in this case? Make another ```then``` after ```catch``` and call ```result.then``` there? — Person, Aug 15 '19 at 11:07
https://stackoverflow.com/questions/28921127/how-to-wait-for-a-javascript-promise-to-resolve-before-resuming-function — Anuga, Aug 15 '19 at 11:08
All the `then` after `catch` will still run if any of the `then` before the `catch` throw an error. This means that you'll have to add the `catch` at the end of it all if you want to stop if any of the `then` throw an error. — Titus, Aug 15 '19 at 11:12
@Anuga I turn my const ```result``` into async function. Wrapped part where I returning fetch inside ```try``` but ```result()``` is still ```pending```. Maybe it is because I need to do something with ```fetch``` inside ```try``` as well — Person, Aug 15 '19 at 11:32
@Titus I want to stop ```then``` after my ```catch``` throw an error. And I already have this ```catch``` — Person, Aug 15 '19 at 11:36
If you cannot change the `.catch`'s position you can check `data` in the forth `then`'s callback, it will be `undefined` if an error was thrown. You're already doing that but you're still running `fetch(link)` with an `undefined` `link`. — Titus, Aug 15 '19 at 11:42
@Titus yes, but I don't want for ```result.then``` to be called at all if the error was thrown — Person, Aug 15 '19 at 11:43
Then throw an error from the `catch` callback, eg: `.catch(err => throw err);` — Titus, Aug 15 '19 at 11:44
@Titus it doesn't change anything - because when I use ```result.then``` ```result``` is still not resolved or rejected — Person, Aug 15 '19 at 11:48
@Allan You need to make `result` a promise that will in the future be rejected, so that the `then` callback will no run. You cannot really avoid calling `.then()` at all. — Bergi, Aug 15 '19 at 12:08

score 0 · Answer 1 · answered Aug 15 '19 at 11:55

Only attach a .catch handler, if you can handle the error at that point and if you can continue the regular control flow. In your case you obviously can't, so don't try to! Remove that .catch()add it somewhere down the chain, were it can handle the error.

 const result = fetch(`url`).then(/*...*).then(/*...*/);

 const result2 = result.then(/*...*/);

 // Somewhere were result gets used, i.e. when adding it to the UI:
 result.then(console.log).catch(console.error);

How to stop fetch from executing if previous the fetch errored?

1 Answers1