How to create a Restful API with asynchronous processing and response using C# + Angular(v5+)

Question

Hello, I am working with C# and I have the following problem:

Imagine I have a route to my API api/estoque/inventario where this route should make the calculation of the inventory of the entire application stock and on demand return the result. To set up this API route, I would have something similar to this:

namespace Api
{
  public class Estoque { ... }

  [Route("api/estoque/inventario")]
  [ApiController]
  public class EstoqueController: ControllerBase
  {
    [HttpGet]
    public async Task<IActionResult<ICollection<Estoque>>> GetInventario()
    {
      try
      {
        // pega os produtos
        // faz todas as regras de negócio (síncronas e assíncronas)
        // retorna o estoque com o inventário (como?)
      }
      catch(Exception ex)
      {
        throw;
      }
    }
  }

}

The problem is that even if I have an asynchronous task in my API, the answer to my client is not asynchronous. On the Client side, I use the library Rxjs together with the Angular and the service that makes the requests to the API has the return of an observable object, thus:

export const API_URL = '...';

export interface IEstoque { ... }

@Injectable({
  providedIn: 'root',
})
export class EstoqueService {

  private baseUrl: string = "/api/estoque";

  constructor(public http: HttpClient) { }

  public getInventario(): Observable<IEstoque[]> {
    return this.http.get(`${API_URL}${this.baseUrl}/inventario`);
  }

}

My intention is to use the list of processed items in stock along with the pipe Asyncpipe which exists at the angle, which makes it possible for me to make an asynchronous loop based on the return of service, thus:

<div *ngFor='let estoque of estoqueList | async'>
  {{estoque | json}}
</div>

@Component({
  selector: 'estoque-list',
  templateUrl: 'estoque-list.component.html',
})
export class EstoqueList {

  public estoqueList: Observable<IEstoque[]>;

  constructor(public estoqueService: EstoqueService) {
    this.estoqueList = estoqueService.getInventario();
  }

}

What I need to do to get my route api/estoque/inventario will send the inventory list asynchronously and continuously to my processing-based frontend?

Answer 1

Leandro, your API signature is asynchronous. This means that in this part (method signature) it is correct. But let’s go over a few things here that might be interfering with what you want.

1 - The whole flow shall be asynchronous.

When working synchronously, everything must be synchronous. Likewise, when working asynchronously, everything must be asynchronous. This is because mixing the behaviors brings unwanted results. So make sure that all the code, data stream and all the processing is also asynchronous, not just the signature of your method. PS: Play everything inside Task.Factory.StartNew is not a way...

2 - The keyword async in your API does not make HTTP asynchronous.

Remember that HTTP itself is not asynchronous. That is, your client (Javascript) will always wait for the server response and even if your method in the API is asynchronous, your interface will not necessarily be. Using async in method signature is related to the internal request/response, call receiving thread allocation and I/O, and does not allow your interface to be more responsive. Basically, using async makes your API lighter and more scalable, especially when it needs to "follow" for slower tasks (like fetching data in a database).

This means that the client (Javascript) will, yes, wait for all the processing to take place and finally receive the answer. The difference is that while the client waits, the I/O thread that would be stuck waiting for the answer (and this thread belongs to a finite number group) will not get stuck and can be used for other requests (faster, for example). But the client will remain waiting until all processing is complete and the result is returned by your API.

3 - So how to improve the experience?

There are several methods and there is no definite answer because each scenario has a different output. In some cases, a "loading" screen (indicating loading) is enough. In others it may be necessary to use Signalr or Socketio to send data as it becomes available. In other scenarios you can create a processing task and return a kind of ID that you can consult later (from time to time) to know if it has already been completed. It all depends on what exactly you want, the requirements of the project (and the client) and the expected total processing time. Just as it is intolerable to leave a "loading..." locked for 4h to process the data, it is unrealistic to create an entire Signalr structure for a task that takes 1 second to be processed.

Answer 2

When we use Api, we make requests, when the method is async it will not send you anything asynchronous as user responses, and as we work with API request, we will not have anything constant, for this you should research on Socketi that will make this better your need, today in 2019 one of the novelties of Microsoft is the Razorcomponent, that will make a WEB application using Signalr and tals so you will be really connected to your Backend being able to do this asynchronous method that needs to.