Is using async/await in promise request more efficient?

Question

What is the best way to make requests?

I have an http request method in project.service.ts. I can make the request with the following structure:

getProjectById(projectId: number) {
  return this.http.get<Project>(`${this.url}/search/projects/${projectId}`).toPromise();
}

And call it with the following structure in project.component.ts:

async getProject(projectId: number) {
  this.isLoading = true;
  try {
    this.project = await this.api.projects.getProjectById(projectId);
  } finally {
    this.isLoading = true;
  }
}

But I can also make the request like this:

async getProjectById(projectId: number) {
  return await this.http.get<Project>(`${this.url}/search/projects/${projectId}`).toPromise();
}

Or this:

getProjectById(projectId: number): Observable<Project> {
  return this.http.get<Project>(`${this.url}/search/project/${projectId}`);
}

But I'd have to subscribe to this function.

Your second `getProjectById` snippet (with the `async` keyword) works exactly the same as the first snippet, so why bother making it more complicated? — Bergi, Dec 05 '21 at 22:13
@Bergi I just want to know the differences between them. For example, if I use the second `getProjectById` would it still be necessary to use async in my `project.component.ts`? Or would it be better to have it by the first method with an async function? — Roberto de León, Dec 05 '21 at 22:15
short answer async await is syntactic sugar of promise nothing change they work exactly the same behind the scene — Abbas Hussain, Dec 05 '21 at 22:16
@RobertodeLeón There is no difference. It still returns a promise for the project response, and yes you still have to handle that with `await` in `getProject`. As for observables vs promises, that is very opinion-based, and also [has been](https://stackoverflow.com/q/40380861/1048572) [asked multiple times](https://stackoverflow.com/q/50269671/1048572) before. — Bergi, Dec 05 '21 at 22:18
@Bergi I had one case where, while debugging a request being made, a second request was made just in the middle of the first. This overwrote the information that was just about to make changes. Why or how could the be prevented when using Observables? — Roberto de León, Dec 05 '21 at 22:21

score 1 · Answer 1 · answered Dec 05 '21 at 22:14

1

This is rather question of design of code and clean code, than efficiency. I reckon following the guidelines of Angular built-in Http module.

You need to keep the code clean, and follow the RxJS flow, rather than convert it to async code.

So you need to use this:

getProjectById(projectId: number): Observable<Project> {
  return this.http.get<Project>(`${this.url}/search/project/${projectId}`);
}

If you have no reason, don't complicate it.

answered Dec 05 '21 at 22:14

Tal Rofe

457
12
46

One example of why I don't use `Observables` was because in a flow of the application, a second request was arriving to the API before the first request, which led to overwritting the new information. – Roberto de León Dec 05 '21 at 22:18
I've been shot at a few times for using Promises on Angular. In my humble opinion, if your data is not changing, I would work with promises. But, if data changes (from an API request using Websocket for real-time data --for example), Observable is the way to go, if not, Promises. Again... my humble opinion. – MrRobot Dec 06 '21 at 00:23
@RobertodeLeón I don't exactly get your point, because RxJS is quiet big library with a lot of options. Do notice, that you have the pipe - and moreover things like Merge – Tal Rofe Dec 06 '21 at 17:38

Is using async/await in promise request more efficient?

1 Answers1