Angular异步获取操作数据方法汇总

1、callback回调函数异步操作数据方法

getCallBackData(fun)
{
    setTimeout(() => {
        fun('500ms返回的数据')
    }, 500);
}

callback调用方法

//callback 异步方法 
this.requestService.getCallBackData((data)=>{
    console.log(data);
});

 

2、Promise

getPromiseData()
{
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            let num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){
                resolve('1000ms后返回的数据'+num);
            }
            else{
                reject('1000ms后返回数字太大了');
            }
        }, 1000);

    });
}

Promise调用方法

//Promise 异步获取 then(()=>{},()=>{}) 第一个()=>{}是成功  第二个()=>{}是失败
this.requestService.getPromiseData().then(
    (data)=>{
        //成功
        console.log(data);
    },
    (data)=>{
        //失败
        console.log("err:"+data);
    }
);

 

3、rxjs 的 Observable

需要:import {Observable} from 'rxjs';

getRxjsData()
{
    return new Observable((observable)=>{
        setTimeout(() => {
        observable.next('1500ms后Rxjs返回的数据');
        }, 1500);
    })
}

 

rxjs 的 Observable 异步请求数据调用方法

let rxjsdata = this.requestService.getRxjsData();
let rxjsinstance = rxjsdata.subscribe((data)=>{
    console.log(data);
});
//取消订阅(在1500ms前直接取消,上面的请求不再执行)
rxjsinstance.unsubscribe();

 

 

所有代码:

request.service.ts

import { Injectable } from '@angular/core';

import {Observable} from 'rxjs';

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

constructor() { }

    getCallBackData(fun)
    {
        setTimeout(() => {
            fun('500ms返回的数据')
        }, 500);
    }

    getPromiseData()
    {
        return new Promise((resolve,reject)=>{
            setTimeout(() => {
            let num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){
                resolve('1000ms后返回的数据'+num);
            }
            else{
                reject('1000ms后返回数字太大了');
            }
            }, 1000);
        });
    }

    getRxjsData()
    {
        return new Observable((observable)=>{
        setTimeout(() => {
            observable.next('1500ms后Rxjs返回的数据');
        }, 1500);
        })
    }

}

ajaxtest.component.ts

import { Component, OnInit } from '@angular/core';

import {RequestService} from '../../services/request.service';

import {Observable} from 'rxjs';

@Component({
    selector: 'app-ajaxtest',
    templateUrl: './ajaxtest.component.html',
    styleUrls: ['./ajaxtest.component.scss']
})
export class AjaxtestComponent implements OnInit {

    constructor(private requestService:RequestService) { }

    ngOnInit() {
        this.requestService.getCallBackData((data)=>{
            console.log(data);
        });

        //Promise 异步获取 then(()=>{},()=>{}) 第一个()=>{}是成功  第二个()=>{}是失败
        this.requestService.getPromiseData().then((data)=>{
            console.log(data);
            },(data)=>{
            console.log("err:"+data);
        });

        //rxjs 的 Observable 异步
        let rxjsdata = this.requestService.getRxjsData();
        let rxjsinstance = rxjsdata.subscribe((data)=>{
            console.log(data);
        });
        //取消订阅
        rxjsinstance.unsubscribe();
    }

}

 

转载请说明出处:原文链接 http://www.nbsite.cn/qdjs/161

转载请说明出处:第六感博客 原文链接:

相关阅读:

bootcdn又挂了(bootcss.com),推荐几个其他cdn的站点

使用 Angular CLI (ng generate)创建组件、服务、类、路由、指令、管道

Angular中的数据请求实现(get、post、jsonp)HttpClient

Angular响应式表单校验及提交主动触发所有校验