skip to Main Content

For my school project, I need to create a sequence diagram. In that sequence diagram I have to represent an API call using simple JavaScript code (fetch() + then() for handling the response).

I’m confused, should I represent this as sync or async communication in a sequence diagram?

In one way, since the web browser is not blocked while waiting for a response I guess it should be async. But in another way, it waits for the response so it can be processed so it’s blocked from executing which means is should be sync?

Picture that represents sync and async communication

I tried google-ing this problem but didn’t find any answers.

2

Answers


  1. An HTTP request that returns the response directly is synchronous. For an asynchronous communication, the server would have to send another message, e.g. via a WebSocket.

    Login or Signup to reply.
  2. The fetch() API is promise-based and hence asynchronous. The then() method is invoked not synchronously, but asynchronously when the promise is fulfilled, i.e. the fetch() response finally arrives.

    Therefore, the right way to model it, is the async call in the right diagram, although, one would expect that the message 4 is send from the end of the activation zone (like for message 3, except that life is going on on the browser side and other activity might start before that incoming message).

    If however you use await fetch() instead of fetch().then() you would have the choice: while technically, it’s still asynchronous, de facto you’d wait for the promise to be completed before doing anything else, i.e. you behave as if it would be synchronous. So in your modelling, you could focus on your design intent, independently of how you implemented it.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search