I am faced with some very old JavaScript code that uses YAHOO.util.Connect.asyncRequest() to speak with a REST API. I would like to wait for the response of the asyncRequest and then work with the response-data. The current code structure does not suffice, because I want to "stay" in the current JS method to keep the state.
My thought was to convert the callback to a promise, i.e. "promisify" the method call. However the examples I could find so far did not bring me to a working solution yet.
If there is a better more up to date solution to the YAHOO.util.Connect.asyncRequest(), I might also welcome that.
This is how the code currently looks like:
async function showEditBookingDialogue(bookingForm, courtOnline) {
//ToDo: Consolidate all the prompts into one window.
let bookingAttributes = bookingForm.getAttribute('data').split('_');
let bookingId = bookingAttributes[0];
//I would like to wait for the response here:
YAHOO.util.Connect.asyncRequest('POST', 'com/cms/BookingRequestHandler.php?action=checkpermissions&bid=' + bid, callback);
...
}
...
var callback = {
customevents: {
onStart: handleEvent.start,
onComplete: handleEvent.complete,
onSuccess: handleEvent.success,
onFailure: handleEvent.failure,
onUpload: handleEvent.upload,
onAbort: handleEvent.abort
},
scope: handleEvent,
argument: ["foo", "bar", "baz"]
};
var handleEvent = {
start: function (eventType, args) {
},
complete: function (eventType, args) {
},
success: function (eventType, args) {
handleResponse(eventType, args);
},
failure: function (eventType, args) {
handleResponse(eventType, args);
},
upload: function (eventType, args) {
handleResponse(eventType, args);
},
abort: function (eventType, args) {
}
};
My current attempts look something like that, however nothing is logged in the console:
const promise = (...args) => {
return new Promise((resolve, reject) => {
YAHOO.util.Connect.asyncRequest('POST', 'com/cms/BookingRequestHandler.php?action=checkpermissions&bid=' + bid, (err, data) => {
if (err) return reject(err)
resolve(data)
})
})
}
await promise()
.then(data => {
console.log("works")
})
.catch(err => {
console.log("error")
});
From looking at example code such as this one, and even your original code, shows that the callback should be an object of handlers. Though official docs also state that a function also is accepted, so it's kinda confusing.
Here is an example of how you could build it using the callback object.
const yahooConnectRequest = body =>
new Promise((resolve, reject) => {
const callback = {
success: resolve,
failure: reject,
};
YAHOO.util.Connect.asyncRequest('POST', 'com/cms/BookingRequestHandler.php', callback, body);
});
Although you can use then chaining with async, it doesn't make much sense, unless you have a case that needs it. The example below is how you could do it without then.
// in async context.
try {
const body = 'action=checkpermissions&bid=1234';
const response = await yahooConnectRequest(body);
console.log(response);
} catch(error) {
console.error(error);
}
I'm curious to learn if this worked out.