1.回调函数
getName() {
return '张三';
}
getAsyncName() {
setTimeout(() => {
return 'async_张三';
}, );
}
这是我们定义好的两个函数，当调用这两个函数的时候，因为setTimeout是异步的，所以并不能正常返回值，补全返回类型可以使我们更加直观的看出效果。
getName(): string
getAsyncName(): void
console.log(this.getName()); //输出：张三
console.log(this.getAsyncName()); //输出：undefined
这时候，要获取返回值，就需要使用回调函数，将getAsyncName（）修改成
getAsyncName(back) {
setTimeout(() => {
back('async_张三');
}, );
}
调用
this.getAsyncName((data) => {
console.log(data);
});
成功输出：async_张三
2.Promise处理异步
getPromiseData() {
return new Promise((success, error) => {
setTimeout(() => {
success('promise_张三');
}, );
});
}
ps：error为失败回调函数，可以不写
调用
this.getPromiseData().then((data) => {
console.log(data);
});
3.Observable（集成在rxjs模块）
import { Observable } from 'rxjs';
getObservableData() {
return new Observable((obserber) => {
setTimeout(() => {
obserber.next('rxjs_张三');
}, );
});
}
ps：失败回调为obserber.error（'失败'）；
调用
this.getObservableData().subscribe((data) => {
console.log(data);
});
可见Promise和Observable非常相似
（Observable强大一点，可以取消订阅、循环监听、提供多种工具函数）
a.取消订阅
const d = this.getObservableData().subscribe((data) => {
console.log(data);
});
d.unsubscribe(); // 取消订阅
由于getObservableData方法是一秒后执行的，程序获得返回值之前执行了取消订阅，所以这里将不打印出结果
b.循环监听
先写一个异步循环函数，每隔一秒返回一个值
getObservable_Interval_Data() {
let i = ;
return new Observable((obserber) => {
setInterval(() => {
i++;
obserber.next('rxjs_张三_Interval_' + i);
}, );
});
}
调用
this.getObservable_Interval_Data().subscribe((data) => {
console.log(data);
});
结果：每隔一秒打印一个值
c.工具函数（pip管道，filter过滤器，map操作）
我们先写一个方法，从1开始递增打印
getObservable_Num_Data() {
let i = ;
return new Observable((obserber) => {
setInterval(() => {
i++;
obserber.next(i);
}, );
});
}
调用
this.getObservable_Num_Data().subscribe((data) => {
console.log(data);
});
好，这很容易，前面也提到过了，但是现在我们不改变原本的函数，但是只要打印偶数呢（对值进行筛选）
import { filter } from 'rxjs/operators';
修改函数如下：
this.getObservable_Num_Data()
.pipe(
filter((value: number) => {
if (value % === ) {
return true;
}
})
)
.subscribe((data) => {
console.log(data);
});
现在我们要打印值的二次幂呢（对值进行操作）
import { map } from 'rxjs/operators';
修改函数如下：
this.getObservable_Num_Data()
.pipe(
map((value: number) => {
return value * value;
})
)
.subscribe((data) => {
console.log(data);
});
还有，就是补充一点，pipe管道可以对值进行多次操作，用逗号隔开，执行顺序从上到下
如：
this.getObservable_Num_Data()
.pipe(
filter((value: number) => {
if (value % === ) {
return true;
}
}),
map((value: number) => {
return value * value;
}),
map((value: number) => {
return value * ;
})
)
.subscribe((data) => {
console.log(data);
});