i'm new to typescript and i can't find an alternative to optimize a line of code as you can see below. I need to filter an array derived from a callback function that i pass to a promise.then()...
getAllItems(): Promise<MyItem[]> {
return this.http.get(this.itemsUrl).toPromise()
.then(this.extractData)
.catch(this.handleError);
}
getItem(id: number | string): Promise<MyItem> {
var that = this; // i want to avoid to use this...
return this.http.get(this.itemsUrl).toPromise()
// ...just here
.then(function(res) {
return that.extractData(res).filter(h => h.id === +id)[0];
})
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || { };
}
Code above works well but i want to use a more short(more typescript i guess) syntax to achieve something like:
getItem(id: number | string): Promise<MyItem> {
return this.http.get(this.itemsUrl).toPromise()
// ... here again
.then(this.extractData => result.filter(h => h.id === +id)[0])
.catch(this.handleError);
}
obviously it does not work...any suggestion please? Thanks.
You still have to pass the response to your extractData method:
getItem(id: number | string): Promise<MyItem> {
return this.http.get(this.itemsUrl).toPromise()
// ... here again
.then(res => this.extractData(res).filter(h => h.id === +id)[0])
.catch(this.handleError);
}
Related
I need to make multiple service call in angular one after other. need to pass the first
service call respose as input to another service.
Here is my component:
Demo(): any {
if (fileToUpload) {
this._voiceboxService.upload(fileToUpload)
.subscribe((res: any) => {
this.text=res.prediction
console.log(res);
});
}
else
console.log("FileToUpload was null or undefined.");
}
}
Here is my Service: i need to call all three service on success of one service and need to
pass first service resposnse as input for next service
upload(fileToUpload: any) {
let input = new FormData();
input.append("file", fileToUpload);
return this.http.post<any>('https://localhost:5001/', input)
language(data: any) {
return this.http.post<any>('https://localhost:5002', data)
}
getDetails(data: any) {
return this.http.post<any>('https://localhost:5003', data)
}
Use mergeMap.
I assume you want to do this in your component:
this._voiceboxService.upload(fileToUpload).pipe(mergeMap(upload =>
this._voiceboxService.language(upload)
.pipe(mergeMap(language => this._voiceboxService.getDetails(language))
))).subscribe((res: any) => {
this.text=res.prediction
console.log(res);
});
You can use map in the end organize your final value result.
You could use any of the RxJS higher order mapping operators like switchMap to map from one observable to another. You could find differences between different mapping operators here.
Service
upload(fileToUpload: any) {
let input = new FormData();
input.append("file", fileToUpload);
return this.http.post<any>('https://localhost:5001/', input).pipe(
switchMap(res => this.language(res)), // <-- `res` = response from previous request
switchMap(res => this.getDetails(res)) // <-- `res` = response from `this.language()`
);
}
language(data: any) {
return this.http.post<any>('https://localhost:5002', data)
}
getDetails(data: any) {
return this.http.post<any>('https://localhost:5003', data)
}
Component
Demo(): any {
if (fileToUpload) {
this._voiceboxService.upload(fileToUpload).subscribe({
next: (res: any) => { // <-- `res` = response from `getDetails()`
this.text = res.prediction
console.log(res);
},
error: (error: any) => {
// handle errors
}
});
} else {
console.log("FileToUpload was null or undefined.");
}
}
i want to do http request using fetch(). The request is more than one that from same domain (it's just different endpoint).
https://api.banghasan.com/quran/format/json/cari/${keyword}/bahasa/id/mulai/0/limit/100
https://api.banghasan.com/quran/format/json/surat/${chapter}/ayat/${verse}
https://api.banghasan.com/quran/format/json/catatan/${num}
I made my code like this:
Get the first data(number of chapter and verse):
static getData(keyword) {
return fetch(`https://api.banghasan.com/quran/format/json/cari/${keyword}/bahasa/id/mulai/0/limit/100`)
.then(resolve => {
return resolve.json()
})
.then(rj => {
if (rj.status == 'ok') {
return Promise.reject(`The "${keyword}" keyword is not found`);
} else {
return Promise.reject(`Something Wrong`)
}
})
.catch(error => {
return Promise.reject(error);
})
}
If getData return `resolve', there are the number of chapter and verses
Then, get the verses:
static async getAyat(surat, ayat) {
return fetch(`https://api.banghasan.com/quran/format/json/surat/${surat}/ayat/${ayat}`)
.then(resolve => {
return resolve.json()
})
.then(rj => {
if (rj.status == 'ok') {
return Promise.resolve(rj.ayat.data);
} else {
return Promise.reject('Terjadi kesalahan')
}
})
.catch(error => {
return Promise.reject(error);
})
}
Last, get Notes, if the verse has something to explain
static getNote(num) {
return fetch(`https://api.banghasan.com/quran/format/json/catatan/${num}`)
.then(resolve => {
return resolve.json()
})
.then(rj => {
if (rj.status == 'ok') {
return Promise.resolve(rj.catatan.teks)
} else {
return Promise.reject('Terjadi kesalahan')
}
})
.catch(error => {
return Promise.reject(error);
})
}
The code is works properly. I just wanna know, is there simple way to write it?
Use a function. Ask yourself which parts are the same versus what is different, then take the parts that are different and make them parameters.
In your case, here's what's different:
The arguments to the function
The URL generation
The data you extract from the response
So here's how you can create a function to encapsulate those differences:
const baseUrl = 'https://api.banghasan.com/quran/format/json';
const returnAllData = data => data;
function createFetchMethod(urlBuilder, dataExtractor = returnAllData) {
return async (...params) => {
const url = urlBuilder(...params);
const response = await fetch(`${baseUrl}${url}`);
if (!response.ok) {
throw new Error("Something's wrong");
}
const json = await response.json();
if (json.status !== 'ok') {
throw new Error("Something's wrong");
}
return dataExtractor(json);
}
}
The way you'd use this is to create your methods like this:
const getData = createFetchMethod(
keyword => `/cari/${keyword}/bahasa/id/mulai/0/limit/100`
);
const getAyat = createFetchMethod(
(surat, ayat) => `/surat/${surat}/ayat/${ayat}`,
json => json.ayat.data
);
const getNote = createFetchMethod(
num => `/catatan/${num}`,
json => json.catatan.teks
);
These can now be called as before, only all the error handling is encapsulated. You can further customize by adding more parameters.
Note that one potential problem with your URL building code is if the parameters being injected aren't URL-safe, you need to call encodeURIComponent for them to escape special characters.
I'm trying to return a boolean after a promise resolves but typescript gives an error saying
A 'get' accessor must return a value.
my code looks like.
get tokenValid(): boolean {
// Check if current time is past access token's expiration
this.storage.get('expires_at').then((expiresAt) => {
return Date.now() < expiresAt;
}).catch((err) => { return false });
}
This code is for Ionic 3 Application and the storage is Ionic Storage instance.
You can return a Promise that resolves to a boolean like this:
get tokenValid(): Promise<boolean> {
// |
// |----- Note this additional return statement.
// v
return this.storage.get('expires_at')
.then((expiresAt) => {
return Date.now() < expiresAt;
})
.catch((err) => {
return false;
});
}
The code in your question only has two return statements: one inside the Promise's then handler and one inside its catch handler. We added a third return statement inside the tokenValid() accessor, because the accessor needs to return something too.
Here is a working example in the TypeScript playground:
class StorageManager {
// stub out storage for the demo
private storage = {
get: (prop: string): Promise<any> => {
return Promise.resolve(Date.now() + 86400000);
}
};
get tokenValid(): Promise<boolean> {
return this.storage.get('expires_at')
.then((expiresAt) => {
return Date.now() < expiresAt;
})
.catch((err) => {
return false;
});
}
}
const manager = new StorageManager();
manager.tokenValid.then((result) => {
window.alert(result); // true
});
Your function should be:
get tokenValid(): Promise<Boolean> {
return new Promise((resolve, reject) => {
this.storage.get('expires_at')
.then((expiresAt) => {
resolve(Date.now() < expiresAt);
})
.catch((err) => {
reject(false);
});
});
}
I'm building an app to get some events from facebook, take a look:
EventComponent:
events: Object[] = [];
constructor(private eventService: EventService) {
this.eventService.getAll()
.subscribe(events => this.events = events)
}
EventService:
getAll() {
const accessToken = 'xxxxxxxxxxx';
const batch = [{...},{...},{...},...];
const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;
return this.http.post('https://graph.facebook.com', body)
.retry(3)
.map(response => response.json())
}
AuthenticationService:
getAccessToken() {
return new Promise((resolve: (response: any) => void, reject: (error: any) => void) => {
facebookConnectPlugin.getAccessToken(
token => resolve(token),
error => reject(error)
);
});
}
I have a few questions:
1) How can I set an interval to update the events every 60 seconds?
2) The value of accessToken will actually come from a promise, should I do something like this?
getAll() {
const batch = [{...},{...},{...},...];
this.authenticationService.getAccessToken().then(
accessToken => {
const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;
return this.http.post('https://graph.facebook.com', body)
.retry(3)
.map(response => response.json())
},
error => {}
);
}
3) If yes, how can I also handle errors from the getAccessToken() promise since I'm returning just the Observer?
4) The response from the post request will not return an array of objects by default, I'll have to make some manipulation. Should I do something like this?
return this.http.post('https://graph.facebook.com', body)
.retry(3)
.map(response => response.json())
.map(response => {
const events: Object[] = [];
// Manipulate response and push to events...
return events;
})
Here are the answers to your questions:
1) You can leverage the interval function of observables:
getAll() {
const accessToken = 'xxxxxxxxxxx';
const batch = [{...},{...},{...},...];
const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;
return Observable.interval(60000).flatMap(() => {
return this.http.post('https://graph.facebook.com', body)
.retry(3)
.map(response => response.json());
});
}
2) You could leverage at this level the fromPromise function of observables:
getAll() {
const batch = [{...},{...},{...},...];
return Observable.fromPromise(this.authenticationService.getAccessToken())
.flatMap(accessToken => {
const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;
return this.http.post('https://graph.facebook.com', body)
.retry(3)
.map(response => response.json())
});
}
3) You can leverage the catch operator to handle errors:
getAll() {
const batch = [{...},{...},{...},...];
return Observable.fromPromise(this.authenticationService.getAccessToken())
.catch(() => Observable.of({})) // <-----
.flatMap(accessToken => {
const body = `access_token=${accessToken}&batch=${JSON.stringify(batch)}`;
return this.http.post('https://graph.facebook.com', body)
.retry(3)
.map(response => response.json())
});
}
In this case, when an error occurs to get the access token, an empty object is provided to build the POST request.
4) Yes sure! The map operator allows you to return what you want...
Put the event inside a timeout block and set the interval of 60s. setTimeout(() => {},60000).
Using Template string is totally fine but you're telling its value comes from a promise. If your whole block of code is inside resolve function of promise this should fine. So it depends on where your code is. And why promises .In A2 it's recommended to use Observables and not promises. Don't mix them.
You're not returning anything in the error function. So if you return error from that block you'll get error data in case of error. error => erroror error => { return error; }.
Exactly you should you map to get the response and manipulate it and return just the array from that function. .map(resp => { return resp.array}). Since respons is in JSON format now you have to get array from it and return it. you can do as much modifications you want before returning it.
Feel free to edit the answer...
I'm working with an existing TypeScript method and I'm struggling to get the errorCallback value from the promise. The Interface looks like the following from the Type Definition file for Angular:
interface IPromise<T> {
then<TResult>(successCallback: (promiseValue: T) => IHttpPromise<TResult>, errorCallback?: (reason: any) => any, notifyCallback?: (state: any) => any): IPromise<TResult>;
then<TResult>(successCallback: (promiseValue: T) => IPromise<TResult>, errorCallback?: (reason: any) => any, notifyCallback?: (state: any) => any): IPromise<TResult>;
then<TResult>(successCallback: (promiseValue: T) => TResult, errorCallback?: (reason: any) => TResult, notifyCallback?: (state: any) => any): IPromise<TResult>;
The TypeScript method I'm working with calls a service and the promise uses the return (this works):
public loadSavedLogin(): ng.IPromise<MyApp.Models.User> {
return this._myAppService.getUser(this.savedUserId).then((result: MyApp.Models.User) => {
if (result) {
this.userId = result.UserID;
this.userName = result.UserName;
}
return result;
});
}
The problem is I have no idea how to get the errorCallback value. If I place a comma after .then((result: MyApp.Models.User), I see Intellisense showing me the errorCallback parameter, but I just can't get any of the syntax working. In raw JS, I'd have a comma at the end with another function accepting the error value, but I'm not sure with this interface how to get the error returned.
How do I modify the function to get the error value if the service call returns one using IPromise?
Here is a simplified example to help you out.
class Test {
public _test: ng.IPromise<string>;
// This method has a return type of ng.IPromise<string>
// You must return a value of this type.
public example(): ng.IPromise<string> {
return this._test.then(
// Success
// Must return a string to be compatible with
// the ng.IPromise<string> return type
(val) => {
alert('Success');
return val;
},
// Error
// Should also return a string to be
// compatible with the return type
(reason) => {
alert('Error: ' + reason);
return '';
});
}
}
Because the example method return type is ng.IPromise<string>, the success function and the error function in the then method must return a string in order for the types to all match up.
In your case, they should return an instance of an MyApp.Models.User.
I suspect in your error function you weren't returning a value - but this makes the best common type between the success and error function void.
Further example... using just an array to show best common types when using functions:
var example = [
(input: string) => { return 'String'; },
(input: string) => { console.log(input); }
];
The best common type used in this example is (input: string) => void. Seems strange - but it actually makes sense. If you call the functions in this array, don't expect to get a return value.
So just make sure your success and error functions have the same return type and all the types will match up for you.
public loadSavedLogin(): ng.IPromise<MyApp.Models.User> {
return this._myAppService.getUser(this.savedUserId).then(
(result: MyApp.Models.User) => {
if (result) {
this.userId = result.UserID;
this.userName = result.UserName;
}
return result;
},
(reason: string) => {
return <MyApp.Models.User> null;
}
);
}