等待打字稿中的异步功能

Question

I've recently jumped into Angular2 and I come from ac# background. I'm currently doing the "data service layer" within the client, and naturally I'm doing it the way I would in ac# project... (So if I'm doing something completely wrong, please let me know as well).

I have a structure that is like this:

1. Data service DataService (generic dataservice that will map the response from a WS to the specified type T). This consist of get, post and put functions.

2. Blog service The BlogService extends the DataService, and this will be the service that for instance BlogListComponent will use.

I'm also going to use rgnx-store, but I will leave that out of this question for now.

Now to the code.

This is from the DataService.

protected post<T>(endpointUrl: string, request: object) : Promise<T> {
        return this.processResponse<T>(this.http.post(endpointUrl, JSON.stringify(request), this.options()));
    }

protected async processResponse<T>(response : Observable<Response>) : Promise<T> {
        return response.map(response => this.extractJson(response))
            .toPromise()
            .catch(this.handleError);
    }

Try 1: My first try - That I naturally thought would work but certainly didn't.

public GetBlogPosts(request : GetBlogPostsRequest) : Array<BlogPost> {
        var blogPosts: Array<BlogPost> = [];

        super.post<Array<BlogPost>>(BlogDataService.GET_BLOGPOSTS_ENDPOINT, request).then(b => blogPosts = b);

        return blogPosts;
    }

What happens here is that I can see that the DataService manage to map the response to an array of blog posts, but the

return blogPosts;

is stepped into before

b => blogPosts = b

So I simply return an empty array.

Try 2: This is the nature of async, so I would get away by telling the function to wait for the Promise to return by using the await keyword.

await super.post<Array<BlogPost>>(BlogDataService.GET_BLOGPOSTS_ENDPOINT, request).then(b => blogPosts = b);

And then the compiler gives a huge error saying I can't have an Array of blogposts as a return type within an async function.

Try 3: Then I removed the async declaration of GetBlogPosts since I really want to return an Array of BlogPost instead of changing it to an Array of whatever, and added a nested function which is an async function.

var s = () => super.post<Array<BlogPost>>(BlogDataService.GET_BLOGPOSTS_ENDPOINT, request).then(b => blogPosts = b);

async function awaiter(asyncFunction) : Promise<any> {
    await asyncFunction;
}

This worked as nicely as the code looks - not at all! Though I could see that the GetBlogPosts didn't hit its return statement before the async function returned anything so I think I am getting closer to something.

Anyways, I am most likely doing something fundamentally wrong here. And I hope I can hear how you are implementing something similar to this.

Thanks from a frustrated newbie!

Answer 1

Try 2: This is the nature of async, so I would get away by telling the function to wait for the Promise to return by using the await keyword.

 await super.post<Array<BlogPost>>(BlogDataService.GET_BLOGPOSTS_ENDPOINT, request).then(b => blogPosts = b); 

And then the compiler gives a huge error saying I can't have an Array of blogposts as a return type within an async function.

Right — because an async function always returns a promise, so if GetBlogPosts is async then it has to return Promise<Array<BlogPost>> , not Array<BlogPost> .

Then of course, the thing using GetBlogPosts has to know how to handle getting the data back from it via the promise, asynchronously.

You want to propagate the asynchronous result until you're at the layer that handles the fact the result is asynchronous, which usually means the entry point into your code (event handler, etc.). At that point, you'd use a non- async function, then (to handle success), and catch (to handle errors). So either GetBlogPost is that spot, or it should return the promise to its caller so its caller (or its caller, etc.) can be that spot.

---

Side note: There's at least one and possibly two issues here:

protected async processResponse<T>(response : Observable<Response>) : Promise<T> {
    return response.map(response => this.extractJson(response))
        .toPromise()
        .catch(this.handleError);
}

1. This may or may not be an issue depending on what this.handleError does. If it returns a rejected promise, skip to #2 below. If not: Usually, with promises, you either return the chain, or handle errors, but not both. If you do both, it's important to make sure you don't convert a rejection into an inappropriate resolution. Remember that then and catch handlers create a new promise, which is resolved/rejected based on what they do.

2. As you're in an async function, using the promise callbacks isn't idiomatic. Either drop the async from the declaration, or use await (and possibly try / catch ).

If you keep the async , then it's probably more idiomatic to do this:

protected async processResponse<T>(response : Observable<Response>) : Promise<T> {
    return await response.map(response => this.extractJson(response)).toPromise();
}

...where again we leave error handling to the caller.