redux-observableを使ってバイナリイメージを正しく取得するには？

Question

私はredux-observableを使用して画像を取得しようとしています。

Microsoft Graph APIに基づいて、要求された写真のバイナリデータを返します。

私はPostmanを使用して画像を取得することに成功しました（これはバイナリであるため結果の画像を表示します）。しかし

、私は私が得たredux-observable、応答を使用しようと常にnullで、responseTypeは関係なく、私はimage/jpeg、text/plain、application/jsonようのContent-Typeのために与えるものを常にjsonではありません。

export const getAvatarEpic = (action$, store) => 
    action$ 
    .ofType(GET_AVATAR) 
    .mergeMap(action => 
     ajax 
     .get(
      'https://graph.microsoft.com/v1.0/me/photo/$value', 
      { 
      // 'Content-Type': 'image/jpeg', 
      'Authorization': 'Bearer ' + myToken 
      } 
     ) 
     .do(res => console.log(res)) // <- the result 
     .map(getAvatarSucceed) 
     .catch(getAvatarFailed) 
    ); 

これは私が得たものです。多分ajax.getの代わりに何か他のものを使うべきでしょうか？

{ 
    "originalEvent": { 
    "isTrusted": true 
    }, 
    "xhr": {}, 
    "request": { 
    "async": true, 
    "crossDomain": false, 
    "withCredentials": false, 
    "headers": { 
     "Authorization": "Bearer hereIsMyToken", 
     "X-Requested-With": "XMLHttpRequest" 
    }, 
    "method": "GET", 
    "responseType": "json", 
    "timeout": 0, 
    "url": "https://graph.microsoft.com/v1.0/me/photo/$value" 
    }, 
    "status": 200, 
    "responseType": "json", 
    "response": null 
} 

Answer 1

は、私が最初にそれが再来、観測可能とRxJSは別々のものであることは明らかになっ確認します。この質問は実際にはRxJSに関する質問です。たとえredux-observableが小さく、慣習的なRxにはほとんどすべてのものを守っているので、（あなたはredux-observableを使っていても）ほぼすべての質問が出てくるでしょう。これは重要です。なぜなら、あなたがRxの質問だけを提示してフレーズとして表現するのであれば、より大きなコミュニティであるため、より多くのヘルプとリソースを見つけることができるからです。お役に立てれば！あなたは組み込みのRxJS v5のためのAjaxのユーティリティを使用している場合

---

することは、あなたが定期的にajax()ヘルパーではなく、速記ajax.get()いずれかを使用する必要があります。

次にあなたがバイナリデータとして画像を取得するためにresponseType: 'arraybuffer'を提供することができます。

​​

この質問は、実際にReduxの観察可能に無関係であるので、ここではバイナリデータを取得し、その後<img>を作成する実証作業例ですそれに：あなたはあなたのバイナリ/ wを受け入れるヘッダーを提供するために、

https://jsbin.com/mimijot/edit?js,output

import { ajax } from 'rxjs/observable/dom/ajax'; 

ajax({ 
    url: 'https://proxy.apisandbox.msdn.microsoft.com/svc?url=https%3A%2F%2Fgraph.microsoft.com%2Fv1.0%2Fme%2Fphoto%2F%24value', 
    headers: { 'Authorization': 'Bearer {token:https://graph.microsoft.com/}' }, 
    responseType: 'arraybuffer' 
}) 
    .subscribe(res => { 
    console.log(res); 
    const buffer = res.response; 
    const blob = new Blob([buffer], { type: 'image/jpeg' }); 
    const url = URL.createObjectURL(blob); 
    const img = document.createElement('img'); 

    img.src = url; 
    document.body.appendChild(img); 
    }); 

Answer 2

グラフエクスプローラを角度4で作成すると、同じ問題が発生しました。我々の場合、画像を要求するときには、responseTypeパラメータをデフォルト値の代わりにArrayBufferに設定する必要があります。

https://github.com/microsoftgraph/microsoft-graph-explorer/blob/master/src/app/graph-service.ts#L54

case "GET": // for all JSON requests to Graph 
     return this.http.get(query, {headers: requestHeaders}).toPromise(); 
case "GET_BINARY": // when fetching images 
     return this.http.get(query, {responseType: ResponseContentType.ArrayBuffer, headers : requestHeaders}).toPromise(); 

し、応答を処理するときに、私たちはブロブURLを取得し、画像要素のsrcを設定します。

let blob = new Blob([ result.arrayBuffer() ], { type: "image/jpeg" }); 
let imageUrl = window.URL.createObjectURL(blob); 

const imageResultViewer = <HTMLImageElement>document.getElementById("responseImg"); 
imageResultViewer.src = imageUrl; 

Rx.DOM.ajaxがresponseTypeプロパティを持っているように見えますので、私はお勧めします私はRxJSのエキスパートではありません！ XMLHttpRequest.responseTypeについての詳細情報は https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType

最終的なコードで見つけることができます：

export const getAvatarEpic = (action$, store) => 
action$ 
.ofType(GET_AVATAR) 
.mergeMap(action => 
    aja:@{ 
    url: 'https://graph.microsoft.com/v1.0/me/photo/$value', 
    responseType: 'arraybuffer', 
    headers: { 
     // 'Content-Type': 'image/jpeg', 
     'Authorization': 'Bearer ' + store.getState().auth.token 
    } 
    }) 
    .map(getAvatarSucceed) 
    .catch(getAvatarFailed) 
);