I have a problem with promises. The point is that the one function isn't completed and the executing code is jumping to then method.
const load = (function() {
const site = function(url, parent) {
return fetch(url)
.then(response => {
return response.text()
})
.then(data => {
parent.innerHTML = data;
})
};
return {
site: site,
};
})();
function mainApp() {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log(document.querySelector('.content'));
const welcome = document.createElement('div');
const content = document.querySelector('.content');
welcome.textContent = `Welcome, ${user.displayName}`;
content.appendChild(welcome);
} else {
}
});
}
function promise() {
return new Promise((resolve, rejected) => {
load.site('pages/main/main.html', content);
//this function isn't completed and executing code is jumping to then
})
}
promise().then(() => {
console.log('then');
mainApp(); //this function is called before the upper code is completed
});
And because of this bug I can't change the DOM in mainApp function because this function is completed before the load function (which is also changing to DOM by using fetch). My goal is to firstly call and complete load.site() and then mainApp() but I don't know what's happening now and where is the problem.
I assume that you assumed that we assume that you resolved the function like
function promise() {
return new Promise((resolve, rejected) => {
load.site('pages/main/main.html', content);
resolve(); // Like this.
})
}
The Problem
When you call promise. It calls load.site and then resolves. So why isn't it giving the expected behavior.
Well, the problem is that load.site is a synchronous function, so it does not wait for the fetch call and returns which resolves promise before fetch is resolved. So, the code in promise.then() runs before the code in fetch.then()
The Solution
Make load.site an asynchronous function so that it returns a promise that can be awaited. i.e.
const site = async function (url) {
return fetch('a.js')
.then(response =>{
return response.text()
})
.then(data =>{
console.log("Loaded");
})
};
Then make the promise's executor async so that you await load.site. i.e.
function promise() {
return new Promise(async (resolve, rejected) => {
await load.site('pages/main/main.html'); // This line does the magic
resolve();
});
};
This will make sure that your promise resolves after fetch has resolved. So that you can get the expected behavior.
Hope it helps. Keep on coding
Related
I am trying to use promises. Basically puting http connections in one js and calling from another js. But I am not able to do so. What's the mistake here?
http.js
'use strict';
const fetch = require('node-fetch');
module.exports.get = async (url) => {
console.log("inside get method");
const promise = new Promise(function (resolve, reject) {
console.log("inside promise");
fetch(url)
.then(res => {
console.log("inside fetch");
resolve(res.json());
})
.catch(json => reject(Error(json)));
})
return promise;
}
main.js
'use strict';
const http = require('/opt/http.js')
module.exports.httpTest = async (event) => {
let url = 'http://www.someurl.com/';
console.log("calling get method");
http.get(url).then(
function (data) {
console.log("inside http then")
console.log(data);
}).catch(function (data) {
console.log(data);
});
console.log("exited get method");
}
As you can see in http.js I have written a wrapper for GET request which I am trying to use in main.js.
When I execute main.js, nothing fails, but not get displayed on console. What I am doing wrong here?
UPDATE
I have added console logs everywhere... and when I call httpTest from anywhere, here is what I am getting
calling get method
inside get method
inside promise
exited get method
basically it's not going inside fetch
Don’t create a useless extra promise.
// this is a code smell
const promise = new Promise(function (resolve, reject) {
console.log("inside promise");
fetch(url)
.then(res => {
console.log("inside fetch");
resolve(res.json());
})
.catch(json => reject(Error(json)));
})
return promise;
Just return fetch(url); which already returns a promise. Your wrapper promise adds nothing.
Second, your exited get method is going to run outside the promise chain. If you want that to run after get finishes you need to await the http.get call inside HttpTest.
Code:
var promiseResolve, promiseReject;
function iterateRules(rules, params, i = 0) {
CWevents.putRule(rules[i], function(err, data) { // This is an async function with a callback
if (err) console.log(err); promiseReject(err)
responses++
params['Lambda_invoke']['SourceArns'].push(data.RuleArn)
if(responses == rules.length){ promiseResolve("Success"); console.log("Resolved")}
// After two responses are confirmed, this if does run and I get the "Resolved"
})
i++
if(i < rules.length){
setTimeout( function(){
iterateRules(params['CW_rules']['Rules'], params, i)
}, 50)
}
}
new Promise((resolve, reject) => {
resolve()
// This part is added solely for the code to make sense, it's taken out of a
// bigger script and lots of unnecessary data is removed
})
.then((Item) => {
return new Promise((resolve, reject) => {
promiseReject = reject;
promiseResolve = resolve;
iterateRules(params['CW_rules']['Rules'], params)
})
}) .then((res) => {
console.log("This ran")
})
The iterateRules function is supposed to run an asynchronous function multiple times, and resolve the Promise it's called in when the last response is acquired. The if(responses == rules.length) does run as expected and logs the "Resolved" in the console. Everything is successful, no errors.
Beneath is the context of this code, the iterateRules function is executed, but the .then that comes after, isn't. If I put a resolve() inside the promise directly, it does execute. What might be wrong with this script? I tried running a simple version of it that looks like this separately:
var res, rej;
function dude(){
res()
}
new Promise((resolve, reject) => {
res = resolve;
dude()
}).then((dude) => {
console.log("resolved")
})
And it does in fact work, so I'm very confused. What might cause the problem?
I would make iterateRules() return a promise (since it is asynchronous). I would also promisify the CWevents.putRule() function so you can accomplish some code like the below:
function iterateRules(rules, params) {
return Promise.all(rules.map(rule => {
return CWevents.putRule(rule)
})).then((data) => {
params['Lambda_invoke']['SourceArns'].push(data.RuleArn)
})
}
Then your handler for iterateRules would become:
iterateRules(rules,params).then(()=>{
// Do something...
})
In my AngularJS Application, I want to access the return value of a Promise, which I access from a service outside of my controller and import it there. This Promise, return an object. I want to access that objects and properties inside it.
I created the service to get that endpoint. Look below:
export const getEndpoints = () => {
const options = {
method: httpMethod.GET,
url: endpoint.ENVIRONMENT,
};
return Instance(options);
};
The above service in return reads an endpoint which I provide and uses axios on the background. This part is working just fine.
Then imported it, on my angular Controller:
import { getEndpoints } from './config/service';
Finally I created this function:
$scope.isItAvailable = false; // I will use this later to check the actual value. It is not important in the scope of the question..
const checkIfItIsAvailable = () => {
return new Promise((resolve, reject) => {
resolve(getEndpoints)
console.log(getEndpoints)
})
}
// And in my main function I am just calling the above
const mainFn = () => {
checkIfItIsAvailable()
// Along with a few others..
}
Actual Results
Now, in my console, I get the functioncheckIfItAvailable printed out.
Expected Results
I instead want to print to the console, the actual value that is being returned by the original promise, the object, and its properties.
Probably You need to call that function instead of just passing it as a parameter.
const checkIfItIsAvailable = () => {
return new Promise((resolve, reject) => {
resolve(getEndpoints()) // here
console.log(getEndpoints())
})
}
Then to get that resolved later in your main function, or wherever - just use then:
const mainFn = () => {
checkIfItIsAvailable().then((result) => {
// do what you need with result here
// $scope.isItAvailable = result probably like this
});
}
Please comment if you need another result. I see at least this issue at the moment.
Also, here is a snipper, illustrating that you need to call it instead of just passing.
// here is an example function which just return some string
function getSomething() {
return 'something'; // it could be a promise also
}
// here is example without calling functions, but just passing:
const promise = new Promise((resolve, reject) => {
console.log('NO CALL: ', getSomething);
});
// here is example with calling, so value is resolved
const promise2 = new Promise((resolve, reject) => {
console.log('CALLED: ', getSomething());
});
Here, getEndpoints is an asynchronous function which returns a Promise, and the way to get a return value from promise is to use then callback. You can do it like this:
const checkIfItIsAvailable = () => {
return new Promise((resolve, reject) => {
getEndpoints().then(resultOfEndPoint => {
console.log(resultOfEndPoint);
resolve(resultOfEndPoint);
});
})
}
It's possible to access the resolved result of getEndpoints in checkIfItIsAvailable calling getEndpoints() and using then() function:
const checkIfItIsAvailable = () => {
return new Promise((resolve, reject) => {
// call getEndpoints
getEndpoints()
// call then to get a result from getEndpoints
.then(res => {
console.log(res);
// checkIfItIsAvailable will be resolved with
// the result of getEndpoints
resolve(res);
});
});
}
i have a function like this in a separate file.
exports.getScore = (storeId) => {
var getScore = new Promise(function (resolve, reject) {
let data = this.getScore('day', storeId)
data.then(function (result) {
resolve(result)
})
})
let result
await getScore.then(function (data) {
result = data
})
return result
}
Can anyone help me with the syntax so i can make async runs, and then execute my await call?
Thanks in advance.
For your question you just need to place an async before your function
exports.getScore = async (storeId) => { /* snip */ }
But actually there are some problem in your code
First, you can pass a promise in Promise executor's resolve
new Promise(resolve => {
// This will work
resolve(anotherPromise)
})
However, if you already have a promise you can just return it directly
If you want to make sure it's a native Promise or you are not sure that it's a Promise or not.
Wrap it in Promise.resolve
Promise.resolve(anotherPromiseOrValue)
So your code can change into:
exports.getScore = (storeId) => this.getScore('day', storeId)
And it also equal:
exports.getScore = this.getScore.bind(this, 'day')
But there is another problem: what is the this here ?
If you extract this function from Vue methods, then the this probably is a Vue instance.
Then I afraid that the above code wont work as you expected.
So I recommend that you just use getScore in your component's lifecycle hook, like mounted
For example:
mounted () {
this.getScore('day', this.storeId).then(score => {
this.score = score
})
}
Or with async/await
async mounted () {
this.score = await this.getScore('day', this.storeId)
}
I have the following 2 functions, each returns a Promise:
const getToken = () => {
return new Promise((resolve, reject) => {
fs.readFile('token.txt', (err, data) => {
if (err) { return reject(err) }
if (!tokenIsExpired(data.token)) {
return resolve(data.token)
} else {
return requestNewToken()
}
})
})
}
const requestNewToken = () => {
return new Promise((resolve, reject) => {
restClient.get(url, (data, res) => {
fs.writeFile('tokenfile.txt', data.token, err => {
resolve(data.token)
})
})
})
}
function1()
.then(value => {
console.log('taco')
})
.catch(err => {
console.log(err)
})
So function1 runs, and (depending on some condition), it sometimes returns function2, which is returning another Promise. In this code, when function2 is called, the console.log('taco') never runs. Why is this? I thought that if you return a Promise from within a Promise, the resolved value of the nested Promise is what is resolved at the top level.
In order for me to get this to work, I have to do this:
const getToken = () => {
return new Promise((resolve, reject) => {
if (!tokenIsExpired()) {
return resolve(getToken())
} else {
return requestNewToken ()
.then(value => {
resolve(value)
})
}
})
}
That works, but it seems like I'm doing something wrong. It seems like there should be a more elegant way to handle/structure this.
You're right that promises auto-unwrap, but in this case you're returning from inside a promise constructor, which is ignored, you need to invoke either resolve or reject instead of using return. I think this might be the solution you're looking for:
const function1 = () => {
return new Promise((resolve, reject) => {
if (someCondition) {
resolve('foobar')
} else {
resolve(function2());
}
})
}
Inside a promise constructor, you need to call resolve or reject, which are equivalent to using return or throw from inside a then callback.
If you find this distinction confusing (I do), you should avoid the promise constructor entirely by just beginning a new chain with Promise.resolve, like this:
const function1 = () => {
return Promise.resolve().then(() => {
if (someCondition) {
return 'foobar';
} else {
return function2();
}
})
}
const function2 = () => {
return new Promise((resolve, reject) => {
resolve('hello world')
})
}
someCondition = false;
function1()
.then(value => {
console.log(value)
})
With your updated code, I recommend using a library to wrap APIs, rather than accessing the promise constructor yourself. For example, using bluebird's promisify:
const bluebird = require('bluebird');
const readFile = bluebird.promisify(fs.readFile);
const writeFile = bluebird.promisify(fs.writeFile);
const getUrl = bluebird.promisify(restClient.get, {multiArgs:true});
const getToken = () => {
return readFile('token.txt')
.then((data) => {
if(!tokenIsExpired(data.token)) {
return data.token;
} else {
return requestNewToken();
}
});
};
const requestNewToken = () => {
return getUrl(url)
.then(([data, res]) => {
return writeFile('tokenFile.txt', data.token)
.then(() => data.token);
});
};
I've remained faithful to your source code, but I'll note there may be a bug to do with writing data.token, and later trying to read the token property in that file.
Why use a library instead of the Promise constructor?
It allows you to write code which deals only with promises, which is (hopefully) easier to understand
You can be confident that callback APIs are correctly converted without losing errors. For example, if your tokenIsExpired function throws an error, using your promise constructor code, it would be lost. You would need to wrap all of your inner callback code in try {} catch(e) {reject(e)}, which is a hassle and easily forgotten.