Modern Full-Stack Development

 Listing  Contacts
When we want a list of contacts to display on the screen, we need to ask the server for 
that. We know that, via the Express-based RESTful interface, we ultimately need the 
Worker.listContacts() method in the Contacts.ts file on the server to be executed, so 
we mimic that interface design with listContacts() in the client-side Worker class:
public async listContacts(): Promise {
  const response: AxiosResponse =
    await axios.get(`${config.serverAddress}/contacts`);
  return response.data;
}
Here, you can see Axios used, as we discussed in the previous section. The 
serverAddress from the config object is used to construct the appropriate path, and 
this is of course a get request, so that’s the Axios method executed. Then, the response 
is returned, and we’re done. Very simple, right? But it serves the important purpose 
architecturally of abstracting away the MailBag client application from the server. 
Think of it this way: if you wanted to change the server to use an XML-based message 
exchange, and you didn’t want to use Axios, you’d only need to change the code in this 
class (and the server, obviously), but the rest of the MailBag client app would be none the 
wiser. That’s good architectural flexibility.
Note  i’m going to go through the rest of these methods, as well as those in the 
iMap and sMtp Worker classes, pretty quickly, because they follow the same 
pattern, which is to mimic the server. no need to linger, i think! But you should 
still take the time to examine the code and make sure you do understand what’s 
happening, simple though it generally is, for each method presented.