Not specifically SharePoint but JavaScript dev using spfx

Question

Can someone explain to me this:

private _getMockListData(): Promise<ISPLists> {
   return MockHttpClient.get()
     .then((data: ISPList[]) => {
       var listData: ISPLists = { value: data };
       return listData;
     }) as Promise<ISPLists>;
 }

I'm copying directly from the MS tutorial on spfx development. Can someone guide me line by line on what it's doing. To give more context I have a separate mock SP list file which is exported from the main entry file (.ts) called ISPList. The above code is typed directly into the entry file.

Up to this point I've understood most of the tutorial but this code is confusing as I get what a Promise is meant to do but need clarification on how this one is written.

Also is the .then a simplification of a If - Then and the return is an alternative to an If - Then? Here is the tutorial if you need it:https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint Apo

Answer 1

private _getMockListData(): Promise<ISPLists> {

this is a function named _getMockListData. It doesn’t return an ISPLists directly, as it’s going to run asynchronously, but it will return a promise object that will be able to retrieve the ISPLists object, once it completes.

return MockHttpClient.get()

Call the get method of the mockhttpclient. Note, this is an async operation. So, this line doesn’t actually wait for the function to complete, it just gets the function started. This is why…

.then((data: ISPList[]) => {

This has nothing to do with if..then. the “then” is one of the async commands we have available to us. It says, wait until the previous async call completes, and “then” do this next thing. Data:ISPList[] means that the next line will have access to a param named data, which is an ISPList[]. (this comes from the async call from the previous step: get()

var listData: ISPLists = { value: data };

Just declares a variable which is an object with a property named “value”, with an actual value of data, which is the param that was passed in (from the get())

return listData;

return it

}) as Promise<ISPLists>;

This completes the “then”, and allows the previous return to be returned as a promise.

A further note on promises:

_getMilk();
_makeCookies();

If getMilk is async, then we start the process of getting milk on that line, and then immediately start making cookies. But this means that we’re making cookies while someone is still out getting the milk. IF getMilk() can return a promise, then we could do the following:

_getMilk().then((paramname:type) => {
 _makeCookies();
});

This means that we start the process of getting milk, and then we wait until that completes, and then we start making the cookies.