JS- Catching Errors Inside and Outside

Question

JS- Catching Errors Inside and Outside

Imagine having 2 catch blocks in your code:

try {
axios.get('https://example.com', {})
  .then(function (responseOne: any) {
    return axios.post('https://example.com', {}, {})
  }).then(async function (responseTwo: any) {
    return axios.put('https://example.com', {}, {})
  }).then(async function (responseThree: any) {
    return axios.post('https://example.com', {}, {})
  }).then(async function () {
    reply.send
  }).catch(error) => {}
} catch(errorOuter) => {}

Based on my understanding, it seems like the outer catch will only be triggered if the first axios call is await axios.get(...). Is this assumption correct? What happens if each of the then blocks are also awaited?

If the code stays as it is, would the inner catch be the only one to be executed? If that's the case, then I can probably remove the outer catch altogether.

typescript promise

Answer 1

Answer №1

Is it correct that only the outer catch would be triggered if the first axios call was awaited using axios.get(...)?

Not quite.

The promise generated by

axios.get('https://example.com', {})

is resolved using then, as are subsequent promises until reaching the end of catch.

If you included await in line 2, you would await the promise from the catch() call.

The function provided to catch() collects and dismisses any error occurring within that chain of promises.

In this scenario, the code wouldn't reach the outer catch block.

If the code remains unchanged, will it always enter the inner catch? In that case, could the outer catch be removed?

Technically, yes; however, eliminating then and relying solely on await would enhance code readability.

try {
    await axios.get('https://example.com', {});
    await axios.post('https://example.com', {}, {});
    await axios.put('https://example.com', {}, {});
    await axios.post('https://example.com', {}, {});
    reply.send;
} catch (e) {
    // handle e
}

Answer 2

Is it correct that only the outer catch would be triggered if the first axios call was awaited using axios.get(...)?

Not quite.

The promise generated by

axios.get('https://example.com', {})

is resolved using then, as are subsequent promises until reaching the end of catch.

If you included await in line 2, you would await the promise from the catch() call.

The function provided to catch() collects and dismisses any error occurring within that chain of promises.

In this scenario, the code wouldn't reach the outer catch block.

If the code remains unchanged, will it always enter the inner catch? In that case, could the outer catch be removed?

Technically, yes; however, eliminating then and relying solely on await would enhance code readability.

try {
    await axios.get('https://example.com', {});
    await axios.post('https://example.com', {}, {});
    await axios.put('https://example.com', {}, {});
    await axios.post('https://example.com', {}, {});
    reply.send;
} catch (e) {
    // handle e
}

Answer 3

Answer №2

Looking at this specific scenario, it seems unlikely that the "outer" catch block (connected to the original try) will be triggered unless Axios encounters an error while trying to execute its asynchronous operation.

Each subsequent operation in the chained promises will eventually reach the .catch() method within that particular Promise if something goes wrong. However, the entire chain functions as one large asynchronous process, and the overall try block finishes and exits before this process reaches completion.

(To demonstrate this further, placing a console.log statement immediately after the code snippet provided would show that the statement is reached even before any of the AJAX operations have finished.)

In this case, the "outer" try/catch structure would only prove useful if you transition from using chained .then() callbacks to utilizing await. For instance:

try {
  const responseOne = await axios.get('https://example.com', {});
  const responseTwo = await axios.post('https://example.com', {}, {});
  const responseThree = await axios.put('https://example.com', {}, {});
  // etc.
} catch(errorOuter) {
  // handle error
}

Answer 4

Looking at this specific scenario, it seems unlikely that the "outer" catch block (connected to the original try) will be triggered unless Axios encounters an error while trying to execute its asynchronous operation.

Each subsequent operation in the chained promises will eventually reach the .catch() method within that particular Promise if something goes wrong. However, the entire chain functions as one large asynchronous process, and the overall try block finishes and exits before this process reaches completion.

(To demonstrate this further, placing a console.log statement immediately after the code snippet provided would show that the statement is reached even before any of the AJAX operations have finished.)

In this case, the "outer" try/catch structure would only prove useful if you transition from using chained .then() callbacks to utilizing await. For instance:

try {
  const responseOne = await axios.get('https://example.com', {});
  const responseTwo = await axios.post('https://example.com', {}, {});
  const responseThree = await axios.put('https://example.com', {}, {});
  // etc.
} catch(errorOuter) {
  // handle error
}

JS- Catching Errors Inside and Outside

Answer №1

Answer №2

Similar questions

Introduction to React with Typescript: Greeting the World

Incorporate a JavaScript script into an Angular 9 application

React JS displayed the string of /static/media/~ instead of rendering its markdown content

Although the cucumber tests indicate success, protractor fails to interact with the elements on the webpage

Using static methods within a static class to achieve method overloading in Typescript

What is the best way to retrieve an object when a value is not found? Consider implementing a looping mechanism with a specific condition in React and TypeScript to successfully

Disabling the scrollbar within angular elements

Error TS2307 - Module 'lodash' not found during build process

When I delete the initial element from the array, the thumbnail image disappears

Troubleshooting TestBed: Resolving the StatusBar Provider Error

Unable to find any routes that match child routes using the new Angular 2 RC1 router

Fixing problems encountered when asynchronously gunzipping an already read file in Node.js

Encountering Issues with NextJS Dynamic SSR: Mobile Devices stuck on loading screen

In what manner can I retrieve this particular type?

Setting values to variables within a component to enable universal access throughout the component in Angular 2

What is the reason behind typescript making it necessary for me to find a way to set a value of type

Unable to make changes to the document

I encountered an issue with my TypeScript function in Angular, as it is unable to process multiple uploaded files

What is the method for specifying a null value in Typescript?

What is the best way to insert an item into a tree structure when determining the appropriate level for insertion is necessary beforehand?