25 April, 2021
Guide Fari

Consuming an API in your web app

I've broken the pattern down into 5 major pieces:

1. async function that awaits a response from the server.

router.get('/alltracks', async (req: Request, res:Response) => {
 const alltracks = await Track.find({})
})

2. checking the response status

status codes can affect flow of the program in many different ways, depending on the use case.

const checkedResponse: Response = await checkResponseStatus(response);

3. retrieve the json content from the response

assuming what you're receiving is json.

let tracks: unknown = await getJsonContent(checkedResponse);

4. return nicely formatted data

as per the needs of your app

let retVal: Track[] = tracks.map(track =>
    new Track( 
        track.name, 
        track.id, 
        track.artists, 
        track.streamURL, 
        track.thumbnailURL, 
        track.genres 
    )

5. optional? validate data before returning it.

I wonder what options I have to achieve this at runtime, I've seen use of io-ts so far. again, what you use at this stage is a contextual solution.

These are to serve as a general guideline, things to think about, when consuming external data into your application.