Harry
Harry

Reputation: 43

How to use async/await for getting data through sharepoint online?

I am able to get some data in SharePoint online using rest and js, and it is solving my purpose also but then i am using async: false to make it synchronous, which i think is not the recommended way. so when i looked for alternative solution, i found out about async/await. Is it possible to use async/await in the code below? Please suggest.

function GetUserProperties(user) {
  //getting user properties for a user
  var url = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v=%27i%3A0%23.f|membership|" + user + "%27";
  $.ajax({
    method: "GET",
    headers: {
      "Accept": "application/json; odata=verbose"
    },
    url: url,
    success: function(data) {
      successUsersInfo(data);
    },
    error: function(data1) {
      alert("ERROR");
    }
  });
}

function successUsersInfo(data) {
  // logic to call data
  secondFunction(); //then i am calling another function
}

function secondFunction() {
  $.ajax({
    method: "GET",
    headers: {
      "Accept": "application/json; odata=verbose"
    },
    url: url,
    async: false,
    success: function(data) {
      //logic to get data
    },
    error: function(data1) {
      alert("ERROR");
    }
  });
  //now my third function depends on the values of second data
  //and i am using  async:false, to make it synchronous
  thirdFunction();
}

function thirdFunction() {
  //logic to use second function data since my third function is dependent on second function
}

Upvotes: 1

Views: 2105

Answers (2)

Estus Flask
Estus Flask

Reputation: 222498

$.ajax already returns a promise. It's jQuery promise that isn't necessarily Promise/A+ compliant (this was fixed in jQuery 3), but it is thenable, so it can be handled by await naturally. $.ajax requires no callbacks to return a promise:

async function GetUserProperties(user) {
  ...
  let result = await $.ajax({
    method: "GET",
    headers: {
      "Accept": "application/json; odata=verbose"
    },
    url: url
  });
  ...
}

Upvotes: 0

get2pallav
get2pallav

Reputation: 64

Use $.Deferred() in such senarios, which will help to chain the functions and you will be able to use then operator

function GetUserProperties(user) {
  var deferred = $.Deferred();
  var url = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v=%27i%3A0%23.f|membership|" + user + "%27";
  $.ajax({
    method: "GET",
    headers: {
      "Accept": "application/json; odata=verbose"
    },
    url: url,
    success: function (data) {
     deferred.resolve(data);
    },
    error: function (data1) {
      alert("ERROR");
    }
  });
  return deferred.promise();
}

function secondFunction() {
  var deferred = $.Deferred();
  $.ajax({
    method: "GET",
    headers: {
      "Accept": "application/json; odata=verbose"
    },
    url: url,
    async: false,
    success: function (data) {
      deferred.resolve(data);
    },
    error: function (data1) {
      alert("ERROR");
    }
  });
  return deferred.promise();

}

function thirdFunction() {
  var deferred = $.Deferred();
  $.ajax({
    method: "GET",
    headers: {
      "Accept": "application/json; odata=verbose"
    },
    url: url,
    async: false,
    success: function (data) {
      deferred.resolve(data);
    },
    error: function (data1) {
      alert("ERROR");
    }
  });
  return deferred.promise();
}

Now you can call these function as follows

   GetUserProperties("uerid")
  .then(function (secondFuncData)
   {
    secondFunction(secondFuncData)
      .then(function (thirdFuncData)
      {
        thirdFuncData(thirdFuncData)
          .then(function (finalData) 
            {
              console.log(finalData);
            })
      })
  })

Function will start with var deferred = $.Deferred(); and end with return deferred.promise();. And return the data in success using deferred.resolve(data);

Upvotes: 1

Related Questions