JavaScript is a single-threaded application and if we continue using that thread for all tasks, user will end up waiting for other tasks which will hamper user experience. To solve this problem, we have asynchronous programming.
TypeScript supports callback functions to make your program asynchronous. A callback function is a function which is scheduled to be called after some asynchronous processing is completed. The callback functions are passed to another function as parameters which allows them to be called when the async processing is completed.
Callback in Angular2/TypeScript
Mostly, you will have callback
function calls after a long running process such as fetching data from online REST APIs. Let’s see an example of this usage.
export class Employee { constructor(public id: number) { } }
In service class, you can create method which can accept parameter of function
type. After method is done processing the request, it will execute the callback
function with data that needs to be passed.
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Employee } from '../model/employee'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class EmployeeService { constructor(private http: HttpClient) { } public getEmployees(callBackUpdateUIElements: function): Observable<Employee[]> { const url = 'http://localhost:3000/employees'; this.http.get<Employee[]>(url)().subscribe(response => { this.employees = response.map( item => { return new Employee( item.id ); }); callBackUpdateUIElements(this.employees); }); } }
In component file, create callback
function which needs to be executed after a service call is successfully completed.
import { Component } from '@angular/core'; import { EmployeeService } from './service/employee.service'; import { Employee } from './model/employee'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; employees = new Array<Employee>(); private callBackUpdateUIElements(employees: Employee[]) { this.employees = employees; //More Logic and code here } constructor( empService:EmployeeService ) { empService.getEmployees(callBackUpdateUIElements); } }
Using callback in above scenario is not a good approach. Rather use RxJS Observable to respond to data change.
Callback in JavaScript
In vanilla JS code, callback functions exist in the form of timeout functions or interval functions. e.g. In this code, we are calling a JavaScript function setTimeout()
which will wait for 2 seconds and then call another function named callback()
.
console.log("Before function call"); setTimeout(callback, 2000); //Async function call through setTimeout() method function callback() { console.log("Callback function called"); } console.log("After function call"); //Output Before function call After function call Callback function called //After 2 seconds delay
Drop me your questions in comments section.
Happy Learning !!