I´m trying do create a function, that returns a Promise as the code: (someprovider.ts)
postToPaymentApi(url:string, data:string, options:RequestOptions, order:Order):Promise<any>{
let result = this.http.post(url, data, options).map(res => res.json())
.subscribe(data => {
// all my logic here!
});
}, error => {
console.log(error)
})
return new Promise((resolve)=>{
resolve(result)
})
}
The problem is, when I call this function, I do not get the data, because this post take a few seconds to finish and I get the promise before the post finish.
this.postToPaymentApi(url, data, options, order).then(data => {
console.log(data);
})
What Am I doing wrong?
if you want to create a function that return promise, your function should be :
postToPaymentApi(url:string, data:string, options:RequestOptions, order:Order):Promise<any >{
return new Promise((resolve, reject) => {
this.http.post(url, data, options)
.map(res => res.json())
.subscribe(data => {
resolve(data);
}
}, error => {
console.log(error)
reject({error: error});
});
});
}
Andre, you want to use the toPromise operator to transform the observable returned by .map() into a promise. Return the result of that operator
return http.post(...).map(...).toPromise()
Now a proper promise is returned, so the calling code can use it as such:
postToPaymentApi(...).then(
data => console.log(data)
)
Related
I have 2 function getAccountInfo() and getAdjustmentsInfo(accountInfo) they both return a new promise. The only different is that the second function needs the information returned from the first function.
I tried to declare these 2 function first, and call them one by one using then(). But it is not working as I expected.
These are the functions, as you can see the second function needs account_code from the first accountInfo object:
function getAccountInfo() {
return new Promise((resolve, reject) => {
getAccountCallbackFunc((errResponse, response) => {
if (errResponse) {
return reject(errResponse);
}
resolve(response);
});
});
}
function getAdjustmentsInfo(accountInfo) {
return new Promise((resolve, reject) => {
getAdjustmentCallbackFunc(accountInfo[0].account_code, function (errResponse, response) {
if (errResponse) {
reject(errResponse);
}
if (response) {
resolve(response);
}
});
});
}
This is the controller code to call the functions:
var accountInfo = {};
getAccountInfo()
.then(response => {
accountInfo = response.data.accounts.account;
console.log(accountInfo);
})
.then(getAdjustmentsInfo(accountInfo))
.catch(err => console.log(err));
So I run the getAccountInfo() function first and run the first then() to saved the account information to the external variable accountInfo.
Next I run the second then() trying to pass the accountInfo to the second function, which is not working, the second function never got called. Is that something I am missing? Please let me know.
There are couple of mistakes in your code. First is that you are not returning anything nor resolving any promise in the line accountInfo = response.data.accounts.account;console.log(accountInfo); so the .then(getAdjustmentsInfo(accountInfo)) will not be called. Secondly, i suppose the first argument to a .then() is always a callback with the first argument being something that is returned from the previous Promise.
Your function getAccountInfo() returns a promise. When that promise is resolved you can
directly use that as follows.
var accountInfo = {};
getAccountInfo()
.then(response => {
accountInfo = response.data.accounts.account;
console.log(accountInfo);
getAdjustmentsInfo(accountInfo)
})
.then(resultFromPreviousPromise => {
//Use the resultFromPreviousPromise if wanted else you can skip this .then()
})
.catch(err => console.log(err));
You are evaluating the getAdjustmentsInfo method immediately, since it's not in a callback. Try:
var accountInfo = {};
getAccountInfo()
.then(response => {
accountInfo = response.data.accounts.account;
console.log(accountInfo);
})
.then(() => getAdjustmentsInfo(accountInfo))
.catch(err => console.log(err));
Or even better:
var accountInfo = getAccountInfo()
.then(response => {
console.log(response.data.accounts.account);
return response.data.accounts.account;
})
.then(account => getAdjustmentsInfo(account))
.catch(err => {
console.log(err));
return {};
})
You call getAdjustmentsInfo straight away instead of waiting for getAccountInfo and you don't return a Promise in the first then. I think this is what you mean to do:
getAccountInfo()
.then(response => {
accountInfo = response.data.accounts.account;
return getAdjustmentsInfo(accountInfo)
})
.catch(err => console.log(err));
Try this, I hope it helps.
function getAccountInfo() {
return new Promise((resolve, reject) => {
getAccountCallbackFunc((errResponse, response) => {
if (errResponse) {
return reject(errResponse);
}
resolve(response);
});
});
}
function getAdjustmentsInfo(accountInfo) {
getAdjustmentCallbackFunc(accountInfo[0].account_code, function (errResponse, response) {
if (errResponse) {
return console.log(errResponse);
}
resolve(response);
});
}
var promise = new Promise(function(resolve, reject){
getAccountInfo()
.then(response => {
resolve(response.data.accounts.account);
console.log(accountInfo);
})
}).then(function(data){
getAdjustmentsInfo(data);
}).catch(function(err){console.log(err)});
I'm trying to limit the number of apis fetches in my project by saving them in a simple cache, key collection in mongodb. Is thera way to stop propagation of .then() inside Promise, without using async/await?
export const getData = (url: string) => {
return new Promise((resolve, reject) => {
findInCache(url)
.then((cached: string | null) => {
if (cached) {
resolve(cached);
}
})
.then(() => {
axios
.get(url)
.then(({data}) => {
setCache(url, data, TTL);
resolve(data);
})
.catch(e => reject(e));
});
});
};
Firstly, lets get rid of the Promise constructor anti-pattern - your function call inside the promise executor returns a promise, so, no need for anew Promise
Secondly, only run the second request if the result of the first is empty
export const getData = (url) => findInCache(url)
// here we return haveResult and avoid axios.get(url) altogether
.then((haveResult) => haveResult || axios.get(url)
// sometimes nested .then is useful like in this case
.then(({data}) => {
setCache(url, data, TTL);
return data;
})
);
you can just do this instead instead of chaining. if it is in cache then fetch from cache else get from url
export const getData = (url: string) => {
return new Promise((resolve, reject) => {
findInCache(url)
.then((cached: string | null) => {
if (cached) {
resolve(cached);
} else {
axios
.get(url)
.then(({data}) => {
setCache(url, data, TTL);
resolve(data);
})
.catch(e => reject(e));
}
})
});
};
When you return something result in then, this result is come into next then function. So, you can control what you would do in next then based on input parameter inCache. So you can do something like:
export const getData = (url: string) => {
return new Promise((resolve, reject) => {
findInCache(url)
.then((cached: string | null) => {
if (cached) {
resolve(cached);
return true;
}
return false;
})
.then((inCache) => {
if (!inCache) {
axios
.get(url)
.then(({data}) => {
setCache(url, data, TTL);
resolve(data);
})
.catch(e => reject(e));
}
});
});
};
I'm brand new to react native and I've been browsing through snippets of code and am confused as to how promises are passed along.
I have this event handler onRefresh() that is called when I pull down on a flatlist and I'm trying to have it use the return of apiSearchDB when it returns true/false.
onRefresh = () => {
this.setState({...}, () => {
return this.apiSearchDB()
.then(function(response) {
console.log(response);
})
.catch((error) => {
console.log(error);
});
})
}
apiSearchDB = () => {
return fetch('/some_endpoint')
.then((response) => response.json())
.then((json) => {
this.setState({
...
}, () => {return true})
return true;
}).catch((error) => {
console.error(error);
return false;
})
}
The line console.log(response); only prints undefined and I can't figure out why.
Could my handler also be written as
onSearch = () => {
return new Promise((resolve, reject) => {
var response = this.apiSearchDB();
response
? resolve();
: reject();
}
});
}
or onSearch = () => {...} and function onSearch(){...}?
Thank you in advance!
You should read more about using promises (good article - We have a problem with promises). However, two basic rules that will help you in this case are are:
The value returned from a promise is wrapped in a promise.
Promises can be chained.
The apiSearchDB should return a promise that contains the json as the resolved value, and error as the rejected value:
apiSearchDB = () =>
fetch('/some_endpoint')
.then((response) => response.json())
.then((json) => json)
// can be removed unless you want to do something with the error before passing it on
.catch((error) => Promise.reject(error));
The onRefresh (or onSearch) method should get the promise from apiSearchDB, and add it's own chain. Resolve promise should be handled with the then handler. If it's the rejected value, it will be handled by the catch handler:
onRefresh = () =>
this.apiSearchDB()
.then((response) => {
console.log(response);
// do something with response
this.setState({...}, () => {
});
return response;
})
.catch((error) => {
console.log(error);
// do something with error
this.setState({...}, () => {
});
});
}
I'm calling a function inside a then statement, and that function has to wait for an event to fire, but my initial function is returning undefined almost immediately:
// call.js
const dialogflow = require('./dialogflow')
module.exports = {
receive: functions.https.onRequest((request, response) => {
...
let respondToUser = getUserId
.then((uid) => {
payload.uid = uid
dialogflow.handleIncoming(payload).then((result) => {
console.log(result)
})
})
.then((result) => {
console.log(result)
response.end()
})
...
}
}
// dialogflow.js
module.exports = {
handleIncoming: (payload) => {
...
let df = dialogflow.textRequest(message.message, {
sessionId: payload.from
})
.on('response', (response) => {
return response.result.fulfillment.speech
})
.on('error', (error) => {
return 'That\'s an error on my end. Try again later!'
})
.end()
}
}
The goal is to call dialogflow.handleIncoming(payload) from call.js, wait for it to return some text, and then continue. But no matter how I have structured it, receive just keeps blowing through it and dialogflow.handleIncoming(payload) ends up undefined.
I've tried using a promise on df with no success, and I can't figure out how to make respondToUser wait for a full response from handleIncoming. Everything else is working so I'm only including relevant code.
This is using api.ai (dialogflow), but in cloud functions in Firebase if that helps. Appreciate any help!
Problem is dialogflow.handleIncoming(payload) is not structured for async. Try this:
// dialogflow.js
exports.handleIncoming = (payload) =>
new Promise((resolve, reject) => {
...
let df = dialogflow.textRequest(message.message, {
sessionId: payload.from
})
.on('response', (response) => {
resolve(response.result.fulfillment.speech)
})
.on('error', (error) => {
reject ('That\'s an error on my end. Try again later!')
})
.end()
}
Your receive function isn't waiting for dialogflow.handleIncoming(payload) to complete. The then function that contains it doesn't have a return statement, so it's returning undefined rather than returning the result of dialogflow.handleIncoming (which is what you want).
let respondToUser = getUserId
.then((uid) => {
payload.uid = uid
return dialogflow.handleIncoming(payload)
})
.then((result) => {
console.log(result)
response.end()
})
The next then statement will contain the response from diagflow.handleIncoming.
I am wanting to refactor a Promise chain by extracting out some functions. Currently I have
const getData = (uuid) => {
return new Promise((resolve) => {
fetch(
// go fetch stuff
)
.then((response) => {
if (!response.ok) {
return resolve(false);
}
return response;
})
.then(fetchres.json)
.then(response => {
// Do more stuff that requires resolves that I will also want to refactor
})
.catch(err => {
console.log(err);
resolve(false);
});
});
};
So I want to extract the part where I resolve the unsuccessful responses. But pass along any successful ones. I have pulled it out like so.
const resolveUnsuccessfulResponses = (response) => {
if (!response.ok) {
return response.resolve(false);
}
return response;
}
const getData = (uuid) => {
return new Promise((resolve) => {
fetch(
// go fetch stuff
)
.then(resolveUnsuccessfulResponses)
.then(fetchres.json)
.then(response => {
// Do more stuff that requires resolves that I will also want to refactor
})
.catch(err => {
console.log(err);
resolve(false);
});
});
};
Now I'm understandably getting the error resolve is not defined. How can I resolve this Promise in an external function?
Should I pass resolve to my extracted function? That would seem clunky.
.then(response => resolveUnsuccessfulResponses(response, resolve))
I might end up having something like
.then(fetchres.json)
.then(parseResponseData)
.then(postDataSomewhere)
.then(doOtherThings)
.then(doEvenMoreCoolThings)
And to have to pass response and resolve to each of them seems wrong
You should return a new Promise from your external functions aswell:
const resolveUnsuccessfulResponses = (response) => {
return new Promise((resolve, reject) => {
if (!response.ok) {
return resolve(false);
}
return resolve(response);
});
}