typescript带参数的异步回调

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(2013)   2023-03-28 11:29:14
JavaScript是一个单线程应用程序,如果我们继续将该线程用于所有任务,用户将最终等待阻碍用户体验的其他任务。为了解决这个问题,我们进行了异步编程。

TypeScript支持回调函数,使您的程序异步。回调函数是一个在一些异步处理完成后被调度的函数。回调函数作为参数传递给另一个函数,允许在异步处理完成时调用它们。
 

Angular / TypeScript中的回调

通常,callback在长时间运行的过程(例如从在线REST API获取数据)之后,您将进行函数调用。我们来看一个这种用法的例子。

employee.ts:
export class Employee {
  constructor(public id: number) {
  }
}
在服务类中,您可以创建可以接受function类型参数的方法。在处理完请求的方法完成后,它将callback使用需要传递的数据执行该函数。
app.service.ts
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);
    });
  }
}
在组件文件中,创建callback在成功完成服务调用后需要执行的功能。
app.component.ts
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);
    }
}

在上面的场景中使用回调不是一个好方法。而是使用RxJS Observable来响应数据更改。

JavaScript中的回调

在vanilla JS代码中,回调函数以超时函数区间函数的形式存在。例如,在这段代码中,我们调用一个JavaScript函数setTimeout(),它将等待2秒,然后调用另一个名为的函数callback()

JavaScript中的回调函数

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
标签: typescript Angular2
地址:https://www.leftso.com/article/452.html

相关阅读

typescript带参数的异步回调,JavaScript是一个单线程应用程序,如果我们继续将该线程用于所有任务,用户将最终等待阻碍用户体验的其他任务。为了解决这个问题,我们进行了异步编程。
Angular HttpClient使用RxJS Observable例子,习使用Angular2  HttpClient服务从在线REST API获取数据并将其作为Observable对象/数...
Spring Boot 2.0 - 开发者工具devtools热部署教程(自动重载),如果你曾经在最新的UI开发框架上工作过,比如Node,angular,gulp等等,那么当你在某些代码发生变...
环境说明 dockerdocker-composemysql 5.7nacos 2.2.3 docker-compose 配置
HTTP协议2.0,HTTP 2.0如何升级_HTTP2.0新特性_HTTP2.0详解。
Spring Boot 2.0 Redis整合,通过spring boot 2.0整合Redis作为spring缓存框架的实现。
这个Log4j2示例将帮助您使用HTMLLayout配置log4j2.xml文件
本文主要翻译spring官方的基于spring security框架的oauth2开发指南,spring,oauth2,spring框架,Java编程
Spring Boot 2.0 支持的Apache Camel 版本发布了_Apache Camel 2.22发布支持Spring Boot 2.0