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

up vote 2 down vote accepted
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 Oct 11 at 13:17
  • A little question here: Why is there a need for =>, is that necessary for the .then? – cardinalNight Oct 11 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 Oct 11 at 13:39

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.