SOLVED

Problem SPFx - Javascript - Ajax

Copper Contributor

Hi, I am trying to use SPFx, but I problem it's happening. I have 2 classes. In render method, first I called a method to do an ajax to get SharePoint Lists. After I want to render this data. But I think that render is called before that my ajax method:

 

Please, could anyone take a look at my code? I uploaded the src to this post.

Other question: I dont know, but this method bellow, why the console show that array it's filled correctly, but the "return array" don't return nothing...

 method.PNG

 

 

1 Reply
best response confirmed by Fernanda Helena (Copper Contributor)
Solution

Hi Fernanda,

 

You basically have an issue with asynchronous code.  

You will have to use promises or async await (which is a super simple abstraction of promises) in order to control the execution of your code and ensure that the code "waits" for the results to be returned by the ajax call before continuing.

 

Using async/await, you will need to change your function to something like the code below (it's using an arrow function, but you don't need to if you don't want). The 'async' word on the function declaration is the key here. This allows you to call the function using 'await' to ensure that the code "waits" for the promise to be returned.

this.array = await _content.getContent();

 

Sample function that performs an ajax call:

request = async (options: AJAXOptions): Promise<any> => {
  try {
    const ajaxRequest: any = await $.ajax({
      url: options.url,
      type: options.method,
      data: options.data,
      headers: options.headers,
      cache: false,
    });
    // return promise
    return ajaxRequest;
  } catch (error) {
    Utils.logError(error);
  }
}
 
Hope this helps
Joel

 

1 best response

Accepted Solutions
best response confirmed by Fernanda Helena (Copper Contributor)
Solution

Hi Fernanda,

 

You basically have an issue with asynchronous code.  

You will have to use promises or async await (which is a super simple abstraction of promises) in order to control the execution of your code and ensure that the code "waits" for the results to be returned by the ajax call before continuing.

 

Using async/await, you will need to change your function to something like the code below (it's using an arrow function, but you don't need to if you don't want). The 'async' word on the function declaration is the key here. This allows you to call the function using 'await' to ensure that the code "waits" for the promise to be returned.

this.array = await _content.getContent();

 

Sample function that performs an ajax call:

request = async (options: AJAXOptions): Promise<any> => {
  try {
    const ajaxRequest: any = await $.ajax({
      url: options.url,
      type: options.method,
      data: options.data,
      headers: options.headers,
      cache: false,
    });
    // return promise
    return ajaxRequest;
  } catch (error) {
    Utils.logError(error);
  }
}
 
Hope this helps
Joel

 

View solution in original post