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

Developing forms in Angular 5 involves the decision of either constructing a specific model for the form group inputs or opting for a more generic variable with two

I'm having trouble with the calculator, unable to identify the issue (Typescript)

Bypassing disputes in a TypeScript function

Is there a counterpart to ES6 "Sets" in TypeScript?

Executing installed packages using npm: A step-by-step guide

Incorporating Close, Minimize, and Maximize functionalities into a React-powered Electron Application

The DAT GUI controls are mysteriously absent from the scene

Dealing with null-safe operators issues has been a challenge for me, especially while working on my Mac using

Converting docx files to PDF in Angular 15 using the "docxjs" library: A step-by-step guide

When creating a new instance of the Date object in Javascript, the constructor will output a date that is

Managing a click event with an element in React using TypeScript

The creation of a parameterized function that doubles as an object property

Managing status in Angular applications

When organizing data, the key value pair automatically sorts information according to the specified key

Typescript's interface for key-value pairing with generic types

When using Inertia.js with Typescript, an issue arises where the argument types {} and InertiaFormProps{} are not compatible with the parameter type Partial<VisitOptions> or undefined

The 'cookies' property is not defined in the 'undefined' type

Encountering an Uncaught TypeError when attempting to set properties of null with useRef

Struggling to determine data type in Typescript

Encountering a "Missing Access" error on the Discord.js API when trying to register my slash commands