今天完成的事情：angular 的 rxjs （）；
明天计划的事情：进行任务八，使用路由进行换页的跳转；
遇到的问题：组件获取服务内的数据遇到了异步的问题，不能正确获取到数据；经过问师兄及查找，使用回调函数解决了异步，并获取数据。还有几个解决异步的方法收获内写写。
收获：
异步编程常见的几种方法：
1，回调函数
2，事件监听/发布订阅
3，Promise
4，RxJS
在服务里，代码运行过程中，因为存在异步的情况，并不能在组件中获取到咱们期望得到的值。
下面开头数字代表执行顺序，当第三步执行后，后面有括号原因，直接返回数值了，并不会执行第四步，因此并不能获取到数据。
1， get() {
2， setTimeout(() => { // 定时器，经过多久后下面代码被执行
4， let url = "/a/article/search";
this.http.get(url, httpOptions).subscribe((res) => {
this.x = res;
}) //内部是获取到数据了，但是函数 get（）并没有
},100);
3， return this.res // 异步原因，此步骤先与中间获取后端数据先执行。返回数值为（undefined）
}
// 组件中获取服务 中的数据
let data = this.storage.get();
console.log(data); // 并不能获取到数据。（undefined）
因此有下面方法解决异步请求数据问题：
回调函数：
get(cd: { (data: any): void; (arg0: any): void; }) {
setTimeout(() => { // 定时器，经过多久后下面代码被执行
let url = "/a/article/search";
this.http.get(url, httpOptions).subscribe((res) => {
this.x = res;
cd(this.x); // 回调函数，将数据调到方式中去
})
})，100;
}
// 组件中调用回调函数
// 获取异步数据 (回调函数方法)
this.storage.get((data: any) => {
console.log(data);
})
Promise：
//2,获取异步内的数据 (Promise)；ES6的知识
getPromiseData() {
return new Promise((resolve) => {
setTimeout(() => { // 定时器，经过多久后下面代码被执行
let url = "/a/article/search";
this.http.get(url, httpOptions).subscribe((res) => {
this.x = res;
resolve(this.x);
});
}, 100);
})
}
// 组件中获取数据
// Promise 获取异步数据
var promiseData = this.storage.getPromiseData();
promiseData.then((pro) => {
console.log(pro);
})
RxJS：使用 rxjs 完成请求异步内数据是需要先引入Observable 模块：
import { Observable } from 'rxjs'; // 属于第三方模块、
在进行请求数据，rxjs 请求数据跟 Promise 有些相似。rxjs 请求数据是使用到 Observable
//3,rxjs 获取异步内的数据
getRxjsData() {
// 异步方法
return new Observable((observer) => {
setTimeout(() => { // 定时器，经过多久后下面代码被执行
let url = "/a/article/search";
this.http.get(url, httpOptions).subscribe((res) => {
this.x = res;
observer.next(this.x); // 成功所返回的数据
// observer.error("数据"); // 失败返回的数据
});
}, 100);
})
}
// 组件中获取数据
// rxjs 获取异步数据
var rxjsData = this.storage.getRxjsData();
rxjsData.subscribe((rxjs) => { // 订阅来获取数据
console.log(rxjs);
})
可以发现 rxjs 的在解决 异步请求数据的方法与 Promise的写法有些类似的；但是 rxjs 请求数据的功能更为强大。
当Promise在创建之后，动作得无法撤回的。但是rxjs的Observable 就不一样，动作可以通过unsbscribe（）的方法来实现中途撤回；
在需要获取数据的组件中，可以实现撤回 rxjs 的数据请求：
// 撤回 rxjs 操作。(取消订阅)
var rxjsData = this.storage.getRxjsData();
var b = rxjsData.subscribe((rxjs) => { // 订阅来获取数据
console.log(rxjs);
})
setTimeout(() => {
b.unsubscribe() // 取消订阅
}, 1000) // 一秒后
返回列表
评论