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

Mike2500 · Accepted Answer · 2018-10-11 12:44:56Z

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.

That's great, thank you. It really helped my understanding, I'll be returning to this frequently I think, for reference. — cardinalNight
– cardinalNight, Commented Oct 11, 2018 at 13:17
A little question here: Why is there a need for =>, is that necessary for the .then? — cardinalNight
– cardinalNight, Commented Oct 11, 2018 at 13:17
Those are "arrow functions". Go read up on them further, but the short answer here is that they're a shortcut syntax for functions. So if we have function addOne(x){return x+1}, we could instead write it as (x)=>x+1 (so, a function that takes x, and returns x+1). So, after the then, there's a function that has a parameter data, which returns listData. Note, if you take away the line breaks, you'll see the body of the "then" has the same syntax as the shortcut mentioned here that adds 1: (data) => {var etc; return listData} — Mike2500
– Mike2500, Commented Oct 11, 2018 at 13:39

Stack Exchange Network

Not specifically SharePoint but JavaScript dev using spfx

1 Answer 1

Your Answer

Hot Network Questions

Not specifically SharePoint but JavaScript dev using spfx

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions