从sync方法发送websocket消息，并以相同的方法返回数据

Question

我正在进行一个有角度的项目，我想知道实现以下内容的最佳方法。

要求是：从缓存中获取图像(如果可用)，否则获取来自web套接字服务器的图像。

我可以使用下面的代码片段完成这项工作。

import { Observable,Observer, Subject } from 'rxjs/Rx';
import { webSocket } from 'rxjs/webSocket'
.....
if(key in localStorage)
{
result = localStorage.getItem(key);
}
else{
this.websocketClient = 
<Subject<Message>>this.imgWebSocketService.connect();
this.websocketClient.subscribe(
(msg) => this.onMessageReceived(msg),
(err) => this.onError(err),
() => console.log('complete')
);
this.websocketClient.next(message);
}

现在，我正试图在一个名为ImageCacheService的单独服务中编写这篇文章，并添加一个从缓存或服务器检索图像的方法。因此，我很难理解Angular 6中的最佳方法。

我需要的是有一个像getImage(request:Message)这样的函数，它将执行这些操作并返回图像数据。

getImage(request:Message,useCache:boolean):any{
var result = null;
if(key in localStorage){
result = localStorage.getItem(key);
}
else{
this.websocketClient.subscribe(
(msg) =>  result = msg,
(err) => this.onError(err),
() => console.log('complete')
);
this.websocketClient.next(message);
}
return result;
}

但由于消息是以异步方式接收的，我理解上面的代码不会像预期的那样工作。我知道写回调可以解决这个问题，但我正在寻找其他更好的方法来实现这一点。

所以，有人能告诉我如何以最好的角度/字体方式做到这一点吗。

Answer 1

我能够找到解决方案。这是工作代码。

getImage(key:any):Promise<any>{
var promise = new Promise((resolve, reject) => {
if(key in localStorage){
var objectFromCache = JSON.parse(localStorage.getItem(key));
resolve(objectFromCache);
}
else{        
this.websocketClient.subscribe(
(msg) => {            
this.setImageToCache(key,msg)
resolve(msg)
},
(err) => reject(err),
() => console.log('complete')
);
this.websocketClient.next(request);
}      
});
return promise;
}

下面是我如何使用这种方法。

this.imgCacheManagerService.getImage(msgToSend).then(
(img) => {        
this.imageData = img.Image;      
},
() => console.log("Error Occurs!"),
);