在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
在Angular中Promise和Observable之间有什么区别?
每一个例子都有助于理解这两种情况。在什么情况下,我们可以使用每种情况?
当前回答
假设你想去海滩。你必须根据天气做出决定。您有三种方法:
你往外面看,看到雨点,所以你改变了主意。这是一个同步操作。你停止了你正在做的事情,去外面看看,得到了结果,然后回到你正在做什么。你请你旁边的哥哥检查一下今天的天气状况。当他在检查天气时,你仍然在做你正在做的事情。这是一个异步操作。你把一项任务交给了你的兄弟,等待承诺得到解决。在这种情况下,您将得到一个响应,在得到响应后,您将不再得到任何更新。这一次,你打开收音机,收听全天候播报天气状况的天气频道。在这种情况下,响应是持续的,而不是得到一个响应。此响应类似于订阅可观察的。可观测的是“天气”,订阅的是“让你不断更新的无线电信号”。只要你的收音机开着,你就会得到所有可用的更新。在你关掉收音机之前,你不会错过任何信息。当你关闭收音机时,意味着“你已取消订阅”。
其他回答
概述:
Promise和Observables都帮助我们处理异步操作。当这些异步操作完成时,它们可以调用某些回调。Promise只能处理一个事件,Observables用于一段时间内的事件流承诺一旦待定,就不能取消可以使用运算符转换可观测数据发射
您可以始终使用可观察对象来处理异步行为,因为可观察对象具有承诺提供的所有功能(+额外功能)。然而,有时不需要Observables提供的额外功能。然后,导入一个库以供其使用将是额外的开销。
何时使用Promise:
当您有一个要处理结果的异步操作时,请使用promise。例如:
var promise = new Promise((resolve, reject) => {
// do something once, possibly async
// code inside the Promise constructor callback is getting executed synchronously
if (/* everything turned out fine */) {
resolve("Stuff worked!");
}
else {
reject(Error("It broke"));
}
});
//after the promise is resolved or rejected we can call .then or .catch method on it
promise.then((val) => console.log(val)) // logs the resolve argument
.catch((val) => console.log(val)); // logs the reject argument
因此,promise执行一些代码,它要么解析,要么拒绝。如果称为resolve或reject,则promise将从挂起状态变为resolved或reject状态。当promise状态被解析时,将调用then()方法。当promise状态被拒绝时,将调用catch()方法。
何时使用Observables:
当一段时间内存在需要处理的数据流时,使用Observables。流是一系列随时间而可用的数据元素。流的示例有:
用户事件,例如单击或键控事件。用户随时间生成事件(数据)。Websockets,在客户端与服务器建立WebSocket连接后,它会随时间推移推送数据。
在Observable中,指定了下一个事件发生的时间、错误发生的时间或Observable完成的时间。然后,我们可以订阅这个可观察的,它激活了它,在这个订阅中,我们可以传递3个回调(不必总是传递所有回调)。成功时执行一次回调,错误时回调,完成时回调。例如:
const observable = Rx.Observable.create(observer => {
// create a single value and complete
observer.onNext(1);
observer.onCompleted();
});
source.subscribe(
x => console.log('onNext: %s', x), // success callback
e => console.log('onError: %s', e), // error callback
() => console.log('onCompleted') // completion callback
);
// first we log: onNext: 1
// then we log: onCompleted
当创建一个可观察对象时,它需要一个回调函数,该函数提供一个观察者作为参数。在这个观察者上,您可以调用onNext、onCompleted和onError。然后,当Observable被订阅时,它将调用传入订阅的相应回调。
关于这个话题已经有很多答案了,所以我不会再赘述。
但是对于刚开始学习Observable/Aangular并想知道与Promise相比使用哪一个的人来说,我建议您将所有内容都保持Observable,并将项目中所有现有的Promise转换为Observable。
因为Angular框架本身及其社区都在使用Observable。因此,当您集成框架服务或第三方模块并将所有内容链接在一起时,这将是有益的。
当然,没有任何意见在所有情况下都是100%正确的,但至少我认为98%的时间是在Angular框架中实现的常规商业项目,Observable是正确的选择。
即使你在开始你的简单爱好项目时不喜欢它,你很快就会意识到你在Angular中与之交互的几乎所有组件,而且大多数Angular友好的第三方框架都使用Observables,然后你会不断地将Promise转换为Observable,以便与它们进行通信。
这些组件包括但不限于:HttpClient、表单生成器、Angular材质模块/对话框、Ngrx存储/效果和ngx引导。
事实上,我在过去两年中处理的Angular生态系统中唯一的Promise是APP_INITIALIZER。
还有一个区别:全球与进口
Promise是一个标准的内置对象,您可以直接使用它。在此处检查浏览器支持。
const myPromise=新Promise((解析,拒绝)=>{setTimeout(()=>{解决(“无需安装即可”);}, 300);});我的承诺.then(值=>{console.log(值)}).catch(错误=>{console.log(错误)});
JavaScript的可观察、反应式扩展需要RxJS安装和导入才能使用
import { Observable } from 'rxjs';
Promise在异步操作完成或失败时处理单个事件。
承诺在应用程序中自动执行,而可观测则是惰性的。所以我们必须订阅可观测值以返回数据。
我们不能取消订阅承诺。与可取消订阅的Observables相比,它们每次都会执行。
Promise:是一个ES6特性,它处理在创建时立即执行的异步代码,该代码当时只能发出一个值,并且不可取消。随着现代应用程序和功能需求的复杂性,如果我们要同时执行多个承诺,或者在执行之前进行过滤或进行一些转换,那么就必须实现复杂的代码:
myPromise.then((resolvedValue) => {
console.log(resolvedValue);
}, (error) => {
console.log(error);
});
Observable:是Rxjs库提供的一个Object,它帮助我们处理JavaScript应用程序中的反应式编程,它提供链接和订阅来处理复杂的应用程序,具有可取消的优点,同时提供许多值。此外,我们还可以从应用其他运算符(如retry()、map()、filter()、switchMap()等)的链接中获益,这有助于处理复杂的用例和繁重的用户界面。
即时搜索示例:
search(terms: Observable<string>) {
return terms.pipe(
debounceTime(400),
distinctUntilChanged(),
switchMap((term) => this.searchEntries(term))
);
}
并行的许多APIS调用示例:
let character = this.http.get('https://jsonplaceholder.typicode.com/todos');
let characterHomeworld = this.http.get(
'https://jsonplaceholder.typicode.com/posts'
);
forkJoin([character, characterHomeworld]).subscribe((results) => {
console.log('result °', results[0]);
console.log('result 1', results[1]);
});