从 observable 返回一个 blob

Question

这个函数应该从 localStorage 读取一个值或从 API 获取它并以两种方式返回一个 blob。

这是服务功能：

      getAudioFile (text: string): Observable<Blob> {
        if (localStorage.getItem(text)) {
           return new Observable(() => {
             return new Blob([localStorage.getItem(text)], {type: 'audio/wav'});
           });
        }
        return this.http.post(this.cors + this.apiUrl, {}, {
            headers: {
              'Content-Type' : 'application/json',
              'Accept' : 'audio/wav',
            },
            params: {
              voice: 'en-US_AllisonV3Voice',
              text : text
            },
            responseType: 'blob'
          }).pipe(map(res => {
            res.text().then((strBlob => {
              localStorage.setItem(text, strBlob);
            }))
            return res;
         }),catchError(this.handleError))
      }

这是我的组件函数：

  toSpeech() {
    this.toSpeechService.getAudioFile(this.text).subscribe(res => {
      console.log(res)          // show nothing when blob is from localstorage
      const EL_audio = document.querySelector("audio");
      EL_audio.src = URL.createObjectURL(res);
      EL_audio.load();
    });
}

此代码在应从 API 获取日期但何时从本地存储读取时运行良好，console.log(res) 什么也不显示！

Answer 1

可能你必须在将 blobOject 写入本地存储之前对其进行序列化，并在从本地存储中读取它后进行反序列化：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

序列化：（到字符串）： JSON.stringify();

反序列化：
JSON.parse();

例如：在您的代码中：

.pipe(map(res => {
            res.text().then((mYBlob => {
               const strBlob:string = JSON.stringify( mYBlob );
               localStorage.setItem('text', strBlob);
            }))
 return res;
         }),catchError(this.handleError))
´´´
  if (localStorage.getItem(text)) {
           return new Observable(() => {

           const blobString= localStorage.getItem('text');
           const myBlob= JSON.parse( blobString );

             return new Blob([ myBlob ], {type: 'audio/wav'});
           });
        }