I am working on a search bar which calls an API when user starts typing. One each key stroke, there is a request to server and it returns the response.
I want to reject previous promises before making the new call to the server, how can I achieve that? Right now I have the issue of old promises coming back and changing the UI which makes it to flicker.
export const makeGetPlaceData = (axios, uri) => (name, country) => {
const promise = new Promise((resolve, reject) => {
axios.get(`${uri}?name=${name}&country=${country}`)
.then(response => {
setTimeout(() => resolve(response), 2000);
})
.catch(error => {
console.log('rejected', error);
reject(error);
});
});
return promise;
};
using setTimeout to simulate a slow network response.
I generally do this at the handler level instead of the promise level. The gist of it is you keep track of how many calls you've done, and each callback knows its call number. When the promise resolves, if the callback is no longer the most recent, return early.
let lastCallId = 1;
function doCall() {
var myCallId = lastCallId;
lastCallId++;
api.doSomething().then((data) => {
if (myCallId !== lastCallId) return;
// Do something with the data
});
}
Related
I am learning things about promises and I am confused with that function. I need to return a reject with message when connect() is not working. I tried a catch but i need to create reject for entire fucntion pooledDownload(). Please help me.
const pooledDownload = (connect, save, downloadList, maxConcurrency) => {
for (let i = 0; i < maxConcurrency; i++) {
connect()
.then((connection) => {
const { download, close } = connection;
download(downloadList[i])
.then((result) => save(result));
close();
})
.catch(() => {
throw new Error("connection failed")
});
}
}
module.exports = pooledDownload
When you call connect() in a for loop, you are creating multiple Promises. If you want to coalesce the results from all the Promise objects into one failure, you can use Promise.all or Promise.allSettled.
For example,
const pooledDownload = async (/*...*/) => {
return Promise.all(
// create an array of promises by mapping each element of an array of 1..N to a Promise
[...Array(maxConcurrency).keys()].map(() => {
return connect().then(/*...*/)
})
);
};
This will create a maxConcurrency-length array of Promise objects and pass it to Promise.all, which will reject if any of the items in the list reject and resolve if all the items in the list resolve. If you return that result, then your pooledDownload function will resolve/reject based on the success of all the individual connections.
Additional Note
It looks like your download function is also returning a promise. If you want the entire "connect -> download -> save" chain to act like one "unit" and succeed/fail together, then you need to return download(/*...*/) from your then call. Otherwise, the call to download() is creating a new promise that is not "connected to the chain" so to speak. You're also going to need to watch out for when you call close, since currently you don't wait for the download call to finish before closing.
Since I don't know which functions are async in this case, I can't exactly say how it should look, but this would be pretty close:
const singleDownload = async (connect, save, downloadListItem) => {
return connect().then((connection) => {
const { download, close } = connection;
return download(downloadListItem).then(async (result) => {
await save(result); // assume save is async
close();
});
});
};
const pooledDownload = async (connect, save, downloadList, maxConcurrency) => {
const allDownloads = [...Array(maxConcurrency).keys()].map((key) => {
return singleDownload(connect, save, downloadList[key]);
});
return Promise.all(allDownloads);
}
So getAstronautsData make request to API then return array of promises. This promises mast make request to Wiki API and parse response in object. Then exampleAsyncFunc must wait all promises and return one big object with all info about Astronauts.
But if I use Promise.all function ending and console is clear.
function getAstronautsData() {
return new Promise((resolve, reject) => {
getData('http://api.open-notify.org/astros.json', "http", (data) => {
resolve(data) // get Astronauts list from API
})
}).then((astronautsList) => {
return astronautsList.people.map((person => // return array of promises
new Promise(resolve => {
getWikiData(person.name, (data) => { // request on Wiki API
resolve({info: data.extract, img: data.thumbnail.source})
})
})
))
})
}
async function exampleAsyncFunc (){
let promisesList = await getAstronautsData()
// next code just few variant was i try
let data = await Promise.all(promisesList)// it's not working.
console.log(data)
Promise.all(promisesList).then(data => console.log(data)) //it's not working. Function display nothing
promisesList.forEach((promise) => { //it's working but not so elegant
promise.then(data => console.log(data))
})
}
exampleAsyncFunc ()
function getWikiData(searhTerm, callback) {
getData(getUrlString(searhTerm), "https", (data) => {
const regex = new RegExp(searhTerm.replaceAll(" ", ".*"));
for (let page in data.query.pages) {
if (data.query.pages[page].title === searhTerm || regex.test(data.query.pages[page].title)) {
callback(data.query.pages[page])
return
}else{
callback(null)
}
}
})
}
You appear to be using Promise.all correctly, but if any of the Promises in Promise.all rejects, then overall Promise.all promise will reject too and nothing will happen, where in your forEach version it'll simply skip those promises silently and move on to the next entries.
Likewise if any of the promises in the list stays pending: if so then the Promise.all promise will never resolve. This could be because you have a long list of return values and the whole list takes a longer-than-expected time to resolve, or because your getWikiData call encounters an error and you don't pass that out to reject that particular promise in your array.
You can debug this behavior by ensuring that each of your calls to then is followed by .catch(console.error) (or some more robust error handler).
Let me first disclose that I am a big promise partisan and frankly deplore callbacks. The implication here is that I would not have written your getData and getWikiData with callbacks.
I will also point out that I second what #t.niese said in the comments: Because it does not make sense having both let data = await Promise.all(promisesList) and promisesList.forEach((promise) => {.
Anyway, your code is unnecessarily complex and can be simplified like so:
function getAstronautsData(callback) {
getData('http://api.open-notify.org/astros.json', "http", data => {
callback(data.people.map(person =>
new Promise(resolve => {
getWikiData(person.name, data => {
resolve(data);
})
}))
)
})
}
function exampleAsyncFunc (){
getAstronautsData(promises => {
Promise.all(promises)
.then(result => {
//result will contain those resolved promises
console.log(result);
})
});
}
exampleAsyncFunc ()
Notice that I am passing a callback to getAstronautsData and call it from inside that function with the array of promises you ultimately want to resolve. No need for async here either as you can see.
Ok, problem was in API (in API one of astronauts have name "Tom Marshburn" but on Wiki his page have title "Thomas Marshburn") and function getWikiData not return any data on error. So i fixed this problem.
Thanks you all for you help!!!
I have a question about clearTimeout method (sorry in advance for noob question). I am wondering where is the best place to clearTimeout in this following code? I have a "getResponse()"function which will be called multiple times. I am not sure where would be the best place to put the clearTimeout so that it will clear the timeout as soon as responseTimeout either resolves or rejects.Thanks
function getResponse() {
const responseTimeout = new Promise((resolve, reject) => {
let id = setTimeout(() => {
if (!messageHandled) {
reject(`Timed out to get response`);
}
}, 3000);
});
const responsePromise = new Promise((resolve, reject) => {
// some code which returns response promise
});
return Promise.race([
responsePromise,
responseTimeout
]);
}
Typically, I'll do it in the promise itself and avoid the overhead of two separate promises.
function getResponse(...params) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("Timed out to get response"))
// some code to abort request
}, 3000)
// some code which resolves promise
})
}
Usefully, promises ignore later resolutions and/or rejections after you resolve it the first time. If you can programmatically abort it without firing the resolution logic, this becomes much easier to do, but even if you can't, you can always slap a boolean to block future requests along the way. It also makes it easier to add support for canceling later on, which is also helpful. If you need to also shut down the timeout (in case you're doing some DOM mutation or file reading - you rarely need to do this), you could do something like this:
function getResponse(...params) {
return new Promise((reallyResolve, reallyReject) => {
let resolved = false
let id = setTimeout(() => {
reject(new Error("Timed out to get response"))
abort()
}, 3000)
// I'll use these instead of the `resolve`/`reject` callbacks directly.
function resolve(value) {
if (resolved) return
resolved = true
clearTimeout(id)
reallyResolve(value)
}
function reject(value) {
if (resolved) return
resolved = true
clearTimeout(id)
reallyReject(value)
}
function abort() {
// some code to abort request
}
// some code which resolves promise
})
}
This makes it so I don't have to worry about orchestrating everything, but it still works.
If you don't need abort logic (you only really need it for network requests and similar), this becomes a lot simpler:
function timeout(ms) {
return new Promise((_, reject) => {
setTimeout(() => reject(new Error("Timed out")), ms)
})
}
function getResponse(...params) {
return Promise.race([
timeout(3000),
doSomethingAsync(),
])
}
As far as I know, there are two options about promise:
promise.all()
promise.race()
Ok, I know what promise.all() does. It runs promises in parallel, and .then gives you the values if both resolved successfully. Here is an example:
Promise.all([
$.ajax({ url: 'test1.php' }),
$.ajax({ url: 'test2.php' })
])
.then(([res1, res2]) => {
// Both requests resolved
})
.catch(error => {
// Something went wrong
});
But I don't understand what does promise.race() is supposed to do exactly? In other word, what's the difference with not using it? Assume this:
$.ajax({
url: 'test1.php',
async: true,
success: function (data) {
// This request resolved
}
});
$.ajax({
url: 'test2.php',
async: true,
success: function (data) {
// This request resolved
}
});
See? I haven't used promise.race() and it behaves like promise.race(). Anyway, is there any simple and clean example to show me when exactly should I use promise.race() ?
As you see, the race() will return the promise instance which is firstly resolved or rejected:
var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, 'one');
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'two');
});
Promise.race([p1, p2]).then(function(value) {
console.log(value); // "two"
// Both resolve, but p2 is faster
});
For a scenes to be used， maybe you want to limit the cost time of a request ：
var p = Promise.race([
fetch('/resource-that-may-take-a-while'),
new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('request timeout')), 5000)
})
])
p.then(response => console.log(response))
p.catch(error => console.log(error))
With the race() you just need to get the returned promise, you needn't care about which one of the promises in the race([]) firstly returned,
However, without the race, just like your example, you need to care about which one will firstly returned, and called the callback in the both success callback.
I've used it for request batching. We had to batch tens of thousands of records into batches for a long running execution. We could do it in parallel, but didn't want the number of pending requests to get out of hand.
Race lets us keep a fixed number of parallel promises running and add one to replace whenever one completes
const _ = require('lodash')
async function batchRequests(options) {
let query = { offset: 0, limit: options.limit };
do {
batch = await model.findAll(query);
query.offset += options.limit;
if (batch.length) {
const promise = doLongRequestForBatch(batch).then(() => {
// Once complete, pop this promise from our array
// so that we know we can add another batch in its place
_.remove(promises, p => p === promise);
});
promises.push(promise);
// Once we hit our concurrency limit, wait for at least one promise to
// resolve before continuing to batch off requests
if (promises.length >= options.concurrentBatches) {
await Promise.race(promises);
}
}
} while (batch.length);
// Wait for remaining batches to finish
return Promise.all(promises);
}
batchRequests({ limit: 100, concurrentBatches: 5 });
It's a piece to build a timeout system, where:
the request/computation may be canceled by another channel
it will still be used later, but we need an interaction now.
For an example of the second, one might show a spinner "instantly" while still defaulting to show real content if it comes in fast enough. Try running the below a few times - note at least some console message comes "instantly". This might normally be attached to perform operations on a UI.
The key to note is - the result of Promise.race is much less important than the side effects (though, this then is a code smell).
// 300 ms _feels_ "instant", and flickers are bad
function getUserInfo(user) {
return new Promise((resolve, reject) => {
// had it at 1500 to be more true-to-life, but 900 is better for testing
setTimeout(() => resolve("user data!"), Math.floor(900*Math.random()));
});
}
function showUserInfo(user) {
return getUserInfo().then(info => {
console.log("user info:", info);
return true;
});
}
function showSpinner() {
console.log("please wait...")
}
function timeout(delay, result) {
return new Promise(resolve => {
setTimeout(() => resolve(result), delay);
});
}
Promise.race([showUserInfo(), timeout(300)]).then(displayed => {
if (!displayed) showSpinner();
});
Inspiration credit to a comment by captainkovalsky.
An example of the first:
function timeout(delay) {
let cancel;
const wait = new Promise(resolve => {
const timer = setTimeout(() => resolve(false), delay);
cancel = () => {
clearTimeout(timer);
resolve(true);
};
});
wait.cancel = cancel;
return wait;
}
function doWork() {
const workFactor = Math.floor(600*Math.random());
const work = timeout(workFactor);
const result = work.then(canceled => {
if (canceled)
console.log('Work canceled');
else
console.log('Work done in', workFactor, 'ms');
return !canceled;
});
result.cancel = work.cancel;
return result;
}
function attemptWork() {
const work = doWork();
return Promise.race([work, timeout(300)])
.then(done => {
if (!done)
work.cancel();
return (done ? 'Work complete!' : 'I gave up');
});
}
attemptWork().then(console.log);
You can see from this one that the timeout's console.log is never executed when the timeout hits first. It should fail/succeed about half/half, for testing convenience.
Here's an easy example to understand the use of promise.race():
Imagine you need to fetch some data from a server and if the data takes too long to load (say 15 seconds) you want to show an error.
You would call promise.race() with two promises, the first being your ajax request and the second being a simple setTimeout(() => resolve("ERROR"), 15000)
Summary:
Promise.race is a JS built in function that accepts an iterable of Promises (e.g. Array) as an argument. This function then asynchronously returns a Promise as soon as one in of the Promises passed in the iterable is either resolved or rejected.
Example 1:
var promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve('Promise-one'), 500);
});
var promise2 = new Promise((resolve, reject) => {
setTimeout(() => resolve('Promise-two'), 100);
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
// Both resolve, but promise2 is faster than promise 1
});
In this example first an array of Promises is passed in Promise.race. Both of the promises resolve but promise1 resolves faster. Therefore the promise is resolved with the value of promise1, which is the string 'Promise-one'.
Example 2:
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve('succes'), 2000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => reject('err'), 1000);
});
Promise.race([promise1, promise2])
.then((value) => {
console.log(value);
}).catch((value) => {
console.log('error: ' + value);
});
In this second example the second promise rejects faster than the first promise can resolve. Therefore Promise.race will return a rejected promise with the value of 'err' which was the value that Promise2 rejected with.
The key point to understand is that Promice.race takes an iterable of Promises and returns a Promise based on the first resolved or rejected promise in that iterable (with the corresponding resolve() or reject() values).
Let's take an sample workaround of Promise.race like below.
const race = (promises) => {
return new Promise((resolve, reject) => {
return promises.forEach(f => f.then(resolve).catch(reject));
})
};
You can see race function executes all promises, but whomever finishes first will resolve/reject with wrapper Promise.
I'm trying to learn how to code using more functions and less loops and just in a more functional way. I want to implement a time out between calling connectBing. I was wondering if it's possible not to use the i variable and still get a 1 second time out between iterations. My code currently works but I'm looking for other ways to write it without using i.
This is my code:
// MAIN
getAllPosts().then((posts) => {
posts
.forEach( (post, i) => {
setTimeout(() => {
connectBing(anchorText,console.log).then()
} ,i * 1000)
})
// CONNECT TO BING WITH KW AND DO SOMETHING
function connectBing(anchorText,doSomethingWithBing) {
var deferred = q.defer();
request('https://www.cnn.com/search?q=' + anchorText, function (error, response, body) {
error ? console.log('error:', error) :
console.log('statusCode:', response && response.statusCode);
(doSomethingWithBing) ? doSomethingWithBing(body) : "You didn't give connectBing anything to do!"
})
return deferred.promise
}
You could take an array of async functions and chain each to run after the other. I will use native promises to demonstrate, and you can map it to the library you are using.
First create a function which takes in an array of async fucntions. It will chain one after the other, returning the last:
function chainAsyncFns(fns) {
// Ensure we have at least one promise to return
let promise = Promise.resolve();
fns.forEach(fn => promise = promise.then(fn));
return promise;
}
Then for each post, create an async function which will call connectBing and then wait for a timeout:
function connectBing() {
// Pretend we are connecting to a data source
return Promise.resolve();
}
function delay(ms) {
// Return a promise that resolves when the timeout is up
return new Promise(resolve => setTimeout(resolve, ms));
}
let fns = posts.map(post => () => {
return connectBing()
.then(() => delay(1000))
.catch(() => console.log('error'));
});
Chain the functions to run one after the other:
chainAsyncFns(fns).then(() => console.log('done'));