Response delay

Let's conclude this exercise block with another improvement to the getAuthToken() function.

Right now, we've accounted for successful and error responses, and also for network errors. However, network connectivity is tricky. What happens if the response never arrives at all and just hangs forever? This can easily happen if the server is overloaded or the network is just too slow.

It would be nice to introduce some timeout logic in the getAuthToken() function that would reject the pending request if it takes too long to complete. But even if we added that logic, we would have to find some means to reproduce that long-pending request...

Yes, of course, I'm talking about MSW!

You can control the response timing using the delay() function exported from the msw package:

import { http, delay } from 'msw'

http.get('/resource', async () => {
  await delay(2000)
})

Apart from accepting an explicit delay duration in milliseconds, you can call delay() without any arguments to emulate a random realistic server response time, or provide it with a delay mode such as 'infinite' to make the delay last forever.

This is really handy when developing mock-first to simulate real-world response timings. But you can also use the delay() function to mock a hanging request.

👨‍💼 In this exercise, create a brand new test case in

get-auth-token.test.ts

for the request timeout, and complete it using server.use() and the delay() function.

Keep in mind: you are working with time and timers here! 😉

🧝‍♀️ I've already added the request timeout handling to

get-auth-token.ts

so make sure to check out what the intention is there! Verify your solution by running npm test.

05. Network/05. Response delay (💪 problem)

Response delay