How can we implement the json() method on a promise result that may be either a Response or void in Typescript?

Question

How can we implement the json() method on a promise result that may be either a Response or void in Typescript?

When working on my React Native app, I encountered an issue with making an API call and using the json() method on the result. Here is the code snippet:

await fetch(...)
  .catch(e => {...})
  .then(res => res.json().then(...)

An error was thrown by TypeScript stating:

Property 'json' does not exist on type 'void | Response'

.

My Query:

Is there a way to avoid this warning?
I noticed that swapping the order of catch and then resolves the error. However, I only want catch to handle errors from fetch(), not from the code within the then block. Is there a workaround for this?

javascript typescript async-await try-catch asynchronous-javascript

Answer 1

Answer №1

To simplify your code, consider utilizing optional chaining:

await fetch(...)
  .catch(e => {...})
  .then(res => res?.json?.().then(...))

By using the optional chaining operator (?.), you can access nested property values without needing to validate every link in the chain.

Answer 2

To simplify your code, consider utilizing optional chaining:

await fetch(...)
  .catch(e => {...})
  .then(res => res?.json?.().then(...))

By using the optional chaining operator (?.), you can access nested property values without needing to validate every link in the chain.

Answer 3

Answer №2

When I switch the positions of catch and then, the error disappears. However, my intention is for catch to only handle errors that arise from fetch(), not from the code within the then block. Is there a way to accomplish this?

A solution would be to utilize .then(…, …) instead of .then(…).catch(…):

await fetch(...).then(res =>
  res.json().then(…)
, e => {
  …
});

Answer 4

When I switch the positions of catch and then, the error disappears. However, my intention is for catch to only handle errors that arise from fetch(), not from the code within the then block. Is there a way to accomplish this?

A solution would be to utilize .then(…, …) instead of .then(…).catch(…):

await fetch(...).then(res =>
  res.json().then(…)
, e => {
  …
});

How can we implement the json() method on a promise result that may be either a Response or void in Typescript?

Answer №1

Answer №2

Similar questions

Unable to modify data with ionic and firebase in child node format

What is the best way to access automatically generated JavaScript variables in TypeScript?

Trouble accessing properties in Mongoose objects?

Guide to indicating the chosen filter in React using Material UI

Tips for linking my TypeScript document to the server

Creating a visual comparison by using knockout side by side

Adjust the field of view of the camera in ThreeJS

Enabling cookie functionality for a component in React.js

Creating interfaces within props is essential for defining the structure of components

Tips for enhancing a search algorithm

What could be causing the issue with the is condition in my Yup validation?

What could be causing my redux-observable to not be triggered as expected?

Having trouble displaying a set of data points in a React component

Node.js is the perfect platform for streaming videos effortlessly

Similar to Angular ui-router 1.0.3, what is the equivalent function for reloadOn

Getting row data from ag-grid using the angular material menu is a straightforward process

What is the process for incorporating the QuillJS module into a component in Angular 2?

How to send varying URL parameters to AJAX function within Django applications

What could be causing JSON.parse to encounter errors when parsing a string array?

Navigating TS errors when dealing with child components in Vue and Typescript