We Keep Coding

How do i return an ajax success function to the method it was called

I want to return the ajax returned value in back to my function where it was called but no data was returned.
function payment {
var x = payment_status(status)
}
function payment_status (status)
{
return $.ajax({
url: "http://127.0.0.1:81/public/api/payment_status",
type: 'POST',
'content-type':'application/X-WWW-form-urlencoded',
'Accept': 'application/json',
data: {
'status' : status,
}, success: function(response){}
});
}

$.ajax() returns a thenable or a Promise (in jquery 3+) See https://www.promisejs.org/ or Promise on MDN (or maybe this answer)
So you can use an async function (but maybe transpile it with babel):
async function payment() {
try {
var response = await payment_status(status);
} catch (error) {
// Handle error
}
}
function payment_status(status) {
return $.ajax({
url: "http://127.0.0.1:81/public/api/payment_status",
type: "POST",
"content-type": "application/X-WWW-form-urlencoded",
Accept: "application/json",
data: {
status: status
});
}

Node js - Synchronous execution of functions through loop

I have a code like the following
function getData()
{
for(var i=0; i<someLength; i++)
{
if(i===0)
{
response = callApi(someValue[i]);
}
else if(i===1)
{
responseInsert = callWebSocket(response, someValue[i]);
}
}
}
function callApi(insertData)
{
axios({
method: 'post',
url: 'http://localhost:1130/services/request',
data: insertData,
headers: { 'content-type': 'application/xml;charset=utf-8' }
}).then(function (response) {
console.log(response);
retVal = true;
return retVal;
}).catch(function (error) {
console.log(error);
});
}
In this, response is needed for callWebsocket function with a array's value, that should be achieved through loop. But callWebSocket function gets called before the response comes due to the asynchronous nature of node js. But I have a use case to use server side scripting and I choose node js. Any help to execute the functions synchronously with the loop in place will save me.

You need to modify the callApi method a bit. Try this:
async function getData()
{
for(var i=0; i<someLength; i++)
{
if(i===0)
{
response = await callApi(someValue[i]);
}
else if(i===1)
{
responseInsert = callWebSocket(response, someValue[i]);
}
}
}
function callApi(insertData)
{
return axios({
method: 'post',
url: 'http://localhost:1130/services/request',
data: insertData,
headers: { 'content-type': 'application/xml;charset=utf-8' }
});
}

Manipulate data from an async call

I have two functions,
function getRequest(url, api_key, callback) {
$.ajax({
url: url,
contentType: 'application/json',
type: 'get',
beforeSend: function(xhr){
xhr.setRequestHeader('Authorization', 'Bearer ' + api_key);
},
success: function(response) {
callback(response);
},
error: function(error) {
console.log(error);
document.getElementById("droplets").textContent = error;
}
});
}
function getDroplets(url, api_key) {
var request = getRequest(url, api_key, function(response) {
var droplets = response.droplets;
var numDroplets = droplets.length;
return {
droplets: droplets,
numDroplets: numDroplets
};
});
alert(request);
}
I want to have another function, let's call it listDroplets, that will call getDroplets() and manipulate the data returned from it. I'm not sure how to do this because getDroplets has an asynchronous call within it.
EDIT: I have tried the following, but it still doesn't work.
async function listDroplets() {
await getDroplets(api_url, api_key);
alert(request.numDroplets);
}

Here are how your functions could return promise like objects that you can use in an async await function:
function getRequest(url, api_key, callback) {
//to escape terrible jQuery Deferred and comfortably continue in Promise land
// you can do
// const deferred = $.ajax(...); return Promise.resolve(deferred)
return $.ajax({//return promise like object
url: url,
contentType: 'application/json',
type: 'get',
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + api_key);
}
});
}
function getDroplets(url, api_key) {
return getRequest(url, api_key)//return promise like object
.then(function (response) {//
var droplets = response.droplets;
var numDroplets = droplets.length;
return {
droplets: droplets,
numDroplets: numDroplets
};
})
.catch(function (error) {//implement error if something goes wrong
console.log(error);
document.getElementById("droplets").textContent = error;
});
}
async function listDroplets() {
//depending on how old your jQuery is you may want to do this:
// await Promise.resolve(getDroplets(api_url, api_key));
const request = await getDroplets(api_url, api_key);
//note that if something goes wrong then request is undefined (depending on jQuery version)
alert(request.numDroplets);
}

How to chain multiple separate JavaScript functions

I know similar questions have been asked before but none of the examples make sense to me. (Any I have found have failed to explain the basics for me with the clarity I need.)
I have four AngularJS functions. Each calls a REST service and does stuff that is unrelated to any of the other functions. E.g.
$scope.step1 = function() { $http({
method: 'GET',
url: "http://www/end/point",
cache: true,
headers: { "Accept": "application/jsonp;odata=verbose" }
}).success(function (data, status, headers, config) {
$scope.step1data = data;
}).error(function (data, status, headers, config) {
$scope.logError(data);
});};
I would like to call the four functions in sequence
$scope.step1
$scope.step2
$scope.step3
$scope.step4
And catch any errors encountered.
I have narrowed the code to the below but it does not work for me. Any help would be greatly appreciated.
$scope.step1().then(function() {
$scope.step2();
}).then(function() {
$scope.step3();
}).then(function() {
$scope.step4();
}).catch(function(e) {
console.log(e);
});

You need to return the promise from each step function to your then() callback so that its resulting promise waits for that promise:
$scope.step1().then(function() {
return $scope.step2();
})...

First, change your step1, step2, step3 and step4 to return promises like below:
$scope.step1 = function() {
return $http({
method: 'GET',
url: "http://www/end/point",
cache: true,
headers: { "Accept": "application/jsonp;odata=verbose" }
})};
$scope.step2 = function() {
return $http({
method: 'GET',
url: "http://www/end/point",
cache: true,
headers: { "Accept": "application/jsonp;odata=verbose" }
})};
$scope.step3 = function() {
return $http({
method: 'GET',
url: "http://www/end/point",
cache: true,
headers: { "Accept": "application/jsonp;odata=verbose" }
})};
$scope.step4 = function() {
return $http({
method: 'GET',
url: "http://www/end/point",
cache: true,
headers: { "Accept": "application/jsonp;odata=verbose" }
})};
Then, chain them together like this:
$scope.step1().then(function (step1data) {
$scope.step1data = step1data;
$scope.step2().then(function (step2Data) {
$scope.step2Data = step2Data;
$scope.step3().then(function (step3Data) {
$scope.step3Data = step3Data;
$scope.step4().then(function (step4Data) {
$scope.step4Data = step4Data;
});
});
});
})

You can mix asynchronous functions with any kind of logic that JavaScript offers if you execute your code synchronously via nsynjs. Here is how your code may need to be transformed:
Step 1: Wrap asynchronous function into generic nsynjs-aware wrapper:
// generic function to retrieve url
// ctx is a reference to caller pseudo-thread context
var httpUrl = function(ctx,url,$http) {
var res={};
$http({
method: 'GET',
url: url,
cache: true,
headers: { "Accept": "application/jsonp;odata=verbose" }
})
.success(function (data, status, headers, config) {
res.data = data;
ctx.resume() // tells nsynjs to resume caller function
}).error(function (data, status, headers, config) {
ctx.resume(data) // resume caller function with exception
// or replace with these 2 lines if you don't want exception
// res.error = data;
// ctx.resume()
});
return res;
};
getUrl.nsynjsHasCallback = true; // this tells nsynjs engine that it
// should pause execution and wait until ctx.resume() is called from callback
Step 2. Write your logic as if it was synchronous, and put it into function:
function synchronousCode(param1, param2) {
var step1 = function() {
var data = httpUrl(nsynjsCtx,"nsynjs/examples/data/file1.json").data;
console.log("data is ready at this point:",data);
// do staff this data
return data;
};
var step2 = function() {
var data = httpUrl(nsynjsCtx,"nsynjs/examples/data/file2.json").data;
console.log("data is ready at this point:",data);
// do staff this data
return data;
};
console.log( step1(param1) + step2(param2) ); // do more staff with data
}
Step 3. Run your synchronous code via nsynjs:
nsynjs.run(synchronousCode,{},"value for param1","value for param1",function(){
console.log("Synchronous Code done");
})
More examples here: https://github.com/amaksr/nsynjs/tree/master/examples

You need to use promise, in your controller, you should inject $q which will handle promise.
angularApp.controller('YourController', ['$q', '$scope',
function ($q, $scope) {
$scope.firstFunction = function () {
var deferred = $q.defer();
//Do things you want here...
console.log(1);
deferred.resolve();
return deferred.promise;
};
$scope.secondFunction = function () {
var deferred = $q.defer();
//Do things you want here...
console.log(2);
deferred.resolve();
return deferred.promise;
};
$scope.firstFunction().then(function () {
$scope.secondFunction.then(function () {
console.log(3)
})
})
}]);
console logs in functions above will print out:
1
2
3

Asynchronous and Synchronous in javaScript

I have to use the SP.RequestExecutor.js library. The problem is I need to run the async function in sync behavior. After deep search I found await and async methods but they are not compatible with Internet Explorer(IE>9). How I can make convert the async functions to sync and be compatible on IE>9 and Chrome?
function executorRun() {
console.log('end2');
var executor = new SP.RequestExecutor('path');
var result=[];
executor.executeAsync({
url: 'URL',
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
},
data: JSON.stringify(requestData),
success: function (data) {
console.log('end3')
console.log(data);//Debug statement
//Handle data and store in result
},
error: function (error) {
console.log(error);
}
});
return result;
}
async function test () {
console.log('end1');
const data = await executorRun();
console.log('end4');
}
test();
I need the output ass follows:
end1
end2
end3
end4.
The above code is running in chrome but on IE refuse the await and async.

In order for await to work, executorRun needs to return a Promise.
function executorRun() {
console.log('end2');
return new Promise(function (resolve, reject) {
var executor = new SP.RequestExecutor('path');
executor.executeAsync({
url: 'URL',
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
},
data: JSON.stringify(requestData),
success: function (data) {
console.log('end3');
console.log(data);//Debug statement
//Handle data and store in result
resolve(data);
},
error: function (error) {
reject(error);
console.log(error);
}
});
});
}
async function test () {
console.log('end1');
const data = await executorRun();
console.log('end4');
}
test();
To use async/await in IE9, you coudl transpile your code with Babel.
You could also just use the Promise directly without the syntactic sugar of async/await:
function test () {
console.log('end1');
executorRun().then(function (data) {
console.log('end4');
});
}
test();
IE doesn't support Promises natively, but they can easily be pollyfilled with any of the many Promise libraries out there.
If you don't want to use Promises, you could always just modify excecutorRun to accept a callback:
function executorRun(callback) {
console.log('end2');
var executor = new SP.RequestExecutor('path');
executor.executeAsync({
url: 'URL',
method: "POST",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
},
data: JSON.stringify(requestData),
success: function (data) {
console.log('end3');
console.log(data);//Debug statement
//Handle data and store in result
callback(data);
},
error: function (error) {
console.log(error);
}
});
}
function test () {
console.log('end1');
executorRun(function (data) {
console.log('end4');
console.log(data);
});
}
test();