I have two functions. function1() takes more time to complete than function2() because it does a fetch request. I need them to be launched in this order, but the results of function2() are the first that are displayed on the HTML DOM. So, I tried to resolve this with promises. I made the first function a variable, and created the following code:
let promise1 = function1() {
fetch()
.then(do x)
.then(display x to HTML DOM)
return 0;
};
function2(a) {
// use the a;
// display some things to the HTML DOM based on `a`
}
promise1.then((a) => {
function2(a);
});
Originally, these two functions don't need to interact with one another, but in order to make this work with promises, I created an artificial need by using that return statement. However, this doesn't work: I get a TypeError: promise1.then is not a function error. I skimmed through the 'Learn more' webpage, but those scenarios don't apply here.
I am quite new to JS and a neophyte to promises. Am I missing something?
You just need to return the promise returned from fetch in your first code block:
let promise1 = function1() {
return fetch()
.then(do x)
.then(() => {
//returns also need to be async
return 0;
});
//don't do this
// return 0;
// return inside the then() above
};
function2(a) {
// use the a;
// display some things to the HTML DOM based on `a`
}
promise1.then((a) => {
function2(a);
});
To explain this in greater detail; Your fetch runs async. So any subsequent functions will not wait (block). fetch returns a Promise that allows you to chain subsequent functions when the async function finishes. So to run anything after fetch you need to consume the Promise that fetch returns. then is a function of the Promise object, not fetch itself, to consume the promise (call then on the promise object) you need to return it first, hence return fetch().... How do I return the response from an asynchronous call? goes into this in detail
To address this, you will need to ensure function1 returns a promise object.
By returning a promise object, this allows you to "chain" subsequent .then() handlers off of calls to that function (ie promise1) as you are trying to do.
So in the case of your specific problem, you would want to do something like this:
let promise1 = function1() {
return fetch('/some/url').then(function (response){
// Do response processing logic here
return response;
}).then(function (data) {
//Chain any other data/response processing
return data;
});
};
The key thing to remember here is to return the call to fetch, as well as return data in each then handler that you chain to the call to fetch.
Hope that helps!
Related
Hello I need to call a REST function with an ID, that returns a promise in React.js. This function will at some point contain a certain value in its response when called . Until another service has processed an initial request this value will be null.
This is what I have done so far:
while(myVariable){
myfunction(myID).then( (response) => {
if(response['value'] != null
myVariable = false;
}
});
}
The problem with this code is that the while loop is called as fast as possible and thus completely utilises the computer. So I need a function that allows me to poll for a result by an ID until the response of one of the function calls contains a valid response.
I have tried the following method but without success, because I don't have a fixed number of runs:
Wait promise inside for loop
Thanks in regards.
As you state, the problem is that the while loop runs eagerly, not waiting for each promise to resolve.
One way to solve that is to use recursion. Recursion gives you more control over when exactly you want to 'loop' next:
let getValue = () => {
myFunction(myID).then(response => {
if (response['value'] === null) {
setTimeout(getValue);
} else {
// here you know the other service has processed the initial request
}
});
};
First I wrapped the whole thing in a function called getValue. Note that this function is only called again after the promise resolves. (The call to setTimeout is a trick to use recursion without consuming the stack.) If this still runs too quickly, pass an additional parameter of 100 or so to the setTimeout invocation.
Alternatively, you may be able to use async/await similarly to the link you shared. I'm no expert on async/await but it should work the same with while loops as with for loops, judging by this and this.
You can use the async function with await.
I also use a delay function to delay each call to the myfunction().
While you get a response, you can break the while loop.
const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms));
async function main() {
const myID = 1;
let response;
while (true) {
response = await myfunction(myID);
if (response["value"] != null) {
break;
}
await delay(5000);
}
//do Something once you get the response here below:
}
main();
For example, I have function which Promise.resolve() if I already have any cached entity id else it make ajax call to reserve entity id and then Promise.resolve() new entity id
function getReservedEntityId(collectionName) {
//if (!haveCachedIds) {
//make ajax call to reserve new ids
Promise.resolve(newId);
}
return Promise.resolve(cachedId);
};
How can we synchronously call it multiple times to reserve multiple entity ids?
P.S. I know that the correct approach is to make this function take parameter that will specify the count of entity ids and make request and return ids accordingly but I wanted to understand how can we call synchronously multiple times any function which is returning promise.
First, the implementation of getReservedEntityId() needs to make correct use of promises. I recommend a thorough reading of how promises work. In particular, it's important to understand that when your function performs an asynchronous task, you need to return a promise that will either resolve or reject based on the result of the asynchronous task.
function getReservedEntityId(collectionName) {
if (haveCachedIds) {
return Promise.resolve(cachedId);
} else {
return new Promise((resolve, reject) => {
// Make the AJAX call and call resolve(newId) in the success callback
// or call reject(errCode) in the failure callback.
// The arguments newId and errCode can be any values you like and are
// the values that get passed to the next link in the promise chain
// i.e. the values passed to then() or catch()
});
}
}
With that squared away, there are two recommended ways to make the calls synchronous:
1) Utilize a promise chain
getReservedEntityId(collectionName)
.then((id) => {
// Probably want to do something with `id` first...
return getReservedEntityId(collectionName);
})
.then( ... )
.then( ... );
Of course, if you're going to pass the same function to each .then() call, you could just as well declare it as a regular function so as to not repeat yourself.
2) Using async/await
This is a new ES2017 feature and is still not widely supported. As of the time of this writing, Node.js supports async/await with the --harmony flag, but most browsers do not. That said, async/await is intended for this exact purpose, treating functions returning promises as though they were synchronous. If you want to start using async/await in your code now, it is common practice to use JavaScript transpilers which which transpile your future-ready JavaScript to code that is supported by all major browsers.
This is how you would use async/await:
(async function someAsyncFunction {
const id1 = await getReservedEntityId(collectionName);
const id2 = await getReservedEntityId(collectionName);
const id3 = await getReservedEntityId(collectionName);
.
.
.
})();
The syntax is much nicer and more readable than the promise chain because it's designed for this exact purpose. Note that I have made the function self-invoking here so that it matches your behavior without having to make an extra function call. But you can use and call a function defined with async function just like any other function that returns a promise.
#fvgs your answer is also correct. But here's the complete solution and the challenge which I have faced is to maintain list of reserveIds which was in response of every getReservedEntityId call.
getEntityIds: function (entity, count) {
if (!count || count == 1)
return Utils.getReservedEntityId(entity);
var promise = new Promise(function(resolve, reject) {
var result = [];
var chain = Utils.getReservedEntityId(entity);
var callBack = function CB (result, newId) {
result.push(newId);
if (result.length == count)
resolve(result);
else
return Utils.getReservedEntityId(entity);
}.bind(null, result);
for (var i=1; i <= count; i++) {
chain.then(callBack);
}
chain.catch(reject);
});
return promise;
}
So I'm struggling with this a couple days and I have found a solution for this but I feel like this isn't the good one.
I currently have the following. I don't like it because I'm nesting Promises within promises. I don't know if this is fine but it doesn't look like it.
What I'm trying to accomplish with this code is first to check the cache database for a value if it is not there then I'll check the real database.
Any tips/tricks/pointers/comments on how to do this more elegantly?
var getData = function() {
var cancel = false
var cache = db.getFromCache(query)
.then((data) => {
// Check if data is up to date
if (uptodate) {
return Promise.resolve(data)
}
cancel = true
})
return cache
.then(() => {
if (cancel)
return db.getFromDatabase().then( //code)
}
}
ps: this code may or may not run I just made it quickly for this question. I can't past the real code here
When you're in a .then() handler, you can do anyone of the following:
Return a value - that value becomes the resolved value of the parent promise. So, there is no need to return Promise.resolve(value). You can just return value.
Return a promise - When you return a promise, it is chained to the parent promise and the parent promise will not resolve until this new promise resolves and the resolved value of this returned promise will become the resolved value of the parent promise.
Throw an Exception - If a .then() handler throws, that exception is automatically caught by the promise infrastructure and is turned into a rejection so throw err works similarly to return Promise.reject(err).
As such, when you're in your .then() handler, you can just check to see if the cache data is valid and, if so, just return it. Otherwise, return a new promise to get the data.
var getData = function() {
return db.getFromCache(query).then((data) => {
// Check if data is up to date
if (uptodate) {
// return cached data, will be resolved value of promise
return data;
} else {
// get data from db, return promise that will be chained
return db.getFromDatabase();
}
})
}
getData().then(...)
Your code is way more complicated than need be:
You don't need Promise.resolve(). You can just return the value.
You don't need the cancel variable at all. You can do all your work inside the first .then() handler.
You don't need the second .then() handler.
Promises support chaining, which means that a promise can return another promise, and this one can return another one, and so on.
According to MDN:
You can pass a lambda (anonymous function) to then and if it returns
a promise, an equivalent Promise will be exposed to the subsequent
then in the method chain.
When a value is simply returned from within a then lambda, it will
effectively return Promise.resolve().
This mean that in the then block, you can check if the data is up to date in the cache. If the data is fresh return it, and the value will be wrapped in a new promise. If the data is stale, you can return the call getFromDatabase(), which returns promise:
const getData = (query) => db.getFromCache(query)
.then((data) => isUpToDate(data) ? data : db.getFromDatabase(query));
getData().then(/** code **/);
Returning from a promise wraps the returned data with a new promise, so you can manipulate the data, and return it, and it will be wrapped by a promise automatically:
db.getFromDatabase().then((data) => data.map(/** some code **/)); // result will be wrapped in a promise.
In angular code, I have a chained promise like this:
// a function in LoaderService module.
var ensureTypesLoaded= function(){
return loadContainerTypes($scope).then(loadSampleTypes($scope)).then(loadProjectList($scope)).then(loadSubjectTypes($scope));
}
Each of these functions return a promise, that loads things from a resource and additionally modifies $scope on error and success, e.g.:
var loadProjectList = function ($scope) {
// getAll calls inside a resource method and returns promise.
return ProjectService.getAll().then(
function (items) {
// succesfull load
console.log("Promise 1 resolved");
$scope.projectList = items;
}, function () {
// Error happened
CommonService.setStatus($scope, 'Error!');
});
};
I intent to use in in a code in a controller initialziation as such:
// Part of page's controller initialization code
LoaderService.ensureTypesLoaded($scope).then(function () {
// do something to scope when successes
console.log("I will do something here after all promises resolve");
}, function () {
// do something when error
});
However, this does not work as I'd like to. Ideally message "I will do something here after all promises resolve" must appear after all promises resolve. Instead, I can see that it appears earlier than messages from resolved promises within functions that are listed ensureTypesLoaded.
I would like to create a function ensureTypesLoaded such, that:
it returns a promise that is resolved when all chained loads are resolved;
if any of "internal" promises fail, the function should not proceed to next call, but return rejected promise.
obviously, if I call ensureTypesLoaded().then(...), the things in then() must be called after everything inside ensureTypesLoaded is resolved.
Please help me with correct building of chained promises.
I thinks that problem is in your loadProjectList function. Because .then() should receive function which is called at resultion time. Usually is function returning chain promise.
But in your case you call all load immediately in parallel. It's little complicated with $scope passing. But I think your code should appear like this
//this fn is called immediatly on chain creation
var loadProjectList = function ($scope) {
//this fn is called when previous promise resolves
return function(data) {
//don't add error handling here
ProjectService.getAll().then(...)
}
}
This cause serial loading as you probably want. (just notice: for parallel excution in correct way $q.all is used)
Finally you should have error handler only in ensureTypesLoaded, not in each promise.
I would like to return x || $.get.
Or in other words, if x is true, then return x, else perform a GET call and return the value provided by the server.
My attempt is listed below (ideally, it would follow the return x || y format maybe with an anonymous function? instead of the if/then).
Problem is my return from my $.get function appears not to be what I expected.
Would appreciate an explanation of what is going on.
Thanks
$(function(){
function test(x,y) {
if(x==true) {return true;}
else{
//test.php is echo($_GET['y']==123);
$.get('ajax.php',{'y':y},function (status) {return status;});
}
}
alert(test(false,123));
});
If you're using jQuery 1.5 or later, Deferred and Promise are your friend for this kind of thing. Any time you call AJAX calls what you get back are Promise objects which you can attach functions to via .done(), .fail(), and .then().
However! As pointed out by this excellent intro to deferred/promise and all this stuff (http://www.erichynds.com/jquery/using-deferreds-in-jquery/), you can also use $.wait()'s ability to handle a value that isn't a promise to automatically do caching. So code like this:
$.when(getToken()).done(
function (token) {
// do something with the token, which may or may not have been
// retrieved from the remote service
}
);
Can handle getting either a cached value back or a promise with no problem:
function getToken() {
// Return either the cached value or a jQuery Promise. If $.when() gets the
// cached value it will immediately realize that you didn't give it a
// promise and it will instead create a jQuery Deferred to return and
// .resolve() it using the value it did get. Thus, either way what
// comes out of the function is something .when() can deal with and call a function.
if (this.cache["token"]) {
return this.cache["token"];
} else {
return $.get(" ... some url ... ");
}
};