How to use fetch in typescript

Question

I am using window fetch in Typescript  but I cannot cast the response directly to my custom type   I am hacking my way around this by casting the Promise result to an intermediate  any  variable    What would be the correct method to do this   import   Actor   from    models actor    fetch  http   swapi co api people 1           then res   gt  res json           then res   gt                 this is not allowed              let a Actor    lt Actor gt res                I use an intermediate variable a to get around this              let a any   res             let b Actor    lt Actor gt a

User · Answer

If you take a look at  types node-fetch you will see the body definition  export class Body       bodyUsed  boolean      body  NodeJS ReadableStream      json    Promise lt any gt       json lt T gt     Promise lt T gt       text    Promise lt string gt       buffer    Promise lt Buffer gt       That means that you could use generics in order to achieve what you want  I didn t test this code  but it would looks something like this   import   Actor   from    models actor    fetch  http   swapi co api people 1           then res   gt  res json lt Actor gt            then res   gt              let b Actor   res

User · Answer

Actually  pretty much anywhere in typescript  passing a value to a function with a specified type will work as desired as long as the type being passed is compatible  That being said  the following works     fetch  http   swapi co api people 1           then res   gt  res json           then  res  Actor    gt                 res is now an Actor            I wanted to wrap all of my http calls in a reusable class - which means I needed some way for the client to process the response in its desired form   To support this  I accept a callback lambda as a parameter to my wrapper method   The lambda declaration accepts an any type as shown here    callBack   response  any    gt  void  But in use the caller can pass a lambda that specifies the desired return type   I modified my code from above like this    fetch  http   swapi co api people 1       then res   gt  res json       then res   gt          if  callback            callback res         Client receives the response as desired type                   So that a client can call it with a callback like     response  IApigeeResponse    gt           Process response as an IApigeeResponse

User · Answer

A few examples follow  going from basic through to adding transformations after the request and or error handling   Basic      Implementation code where T is the returned data shape function api lt T gt  url  string   Promise lt T gt      return fetch url       then response   gt          if   response ok            throw new Error response statusText                return response json lt T gt                  Consumer api lt   title  string  message  string   gt   v1 posts 1      then    title  message      gt        console log title  message          catch error   gt           show error message           Data transformations   Often you may need to do some tweaks to the data before its passed to the consumer  for example  unwrapping a top level data attribute  This is straight forward   function api lt T gt  url  string   Promise lt T gt      return fetch url       then response   gt          if   response ok            throw new Error response statusText                return response json lt   data  T   gt                then data   gt        lt -- data inferred as   data  T           return data data              Consumer - consumer remains the same api lt   title  string  message  string   gt   v1 posts 1      then    title  message      gt        console log title  message          catch error   gt           show error message           Error handling   I d argue that you shouldn t be directly error catching directly within this service  instead  just allowing it to bubble  but if you need to  you can do the following   function api lt T gt  url  string   Promise lt T gt      return fetch url       then response   gt          if   response ok            throw new Error response statusText                return response json lt   data  T   gt                then data   gt          return data data             catch  error  Error    gt          externalErrorLogging error error      lt -- made up logging service          throw error     lt -- rethrow the error so consumer can still catch it                 Consumer - consumer remains the same api lt   title  string  message  string   gt   v1 posts 1      then    title  message      gt        console log title  message          catch error   gt           show error message           Edit  There has been some changes since writing this answer a while ago  As mentioned in the comments  response json lt T gt  is no longer valid  Not sure  couldn t find where it was removed    For later releases  you can do      Standard variation function api lt T gt  url  string   Promise lt T gt      return fetch url       then response   gt          if   response ok            throw new Error response statusText                return response json   as Promise lt T gt                For the  unwrapping  variation  function api lt T gt  url  string   Promise lt T gt      return fetch url       then response   gt          if   response ok            throw new Error response statusText                return response json   as Promise lt   data  T   gt              then data   gt            return data data

[typescript] How to use fetch in typescript

Examples related to typescript

Examples related to promise