如何使用redux-observable正確獲取二進制圖像？

Question

我試圖使用redux-observable獲取圖像。

基於Microsoft Graph API ，它返回所請求照片的二進制數據。

我成功使用Postman獲取圖像（它顯示結果中的圖像，因為它是二進制）。

但是，當我嘗試使用redux-observable時 ，我得到的響應總是為null ，並且無論我為Content-Type提供什么樣的響應，它都是json如image/jpeg ， text/plain ， application/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

我想首先確保redux-observable和RxJS是分開的東西。 這個問題實際上是一個RxJS問題，因為幾乎所有你會遇到的問題（即使使用redux-observable）也是如此，因為redux-observable很小，並且幾乎把所有東西都推遲到慣用的Rx。 這一點很重要，因為在提問時如果你提出問題並將它們簡稱為Rx問題，你會發現更多的幫助和資源，因為它是一個更大的社區。 希望這可以幫助！

---

如果您正在為RxJS v5使用內置的ajax實用程序，則需要使用常規的ajax()幫助程序，而不是簡寫的ajax.get() 。

然后你可以提供responseType: 'arraybuffer'來獲取圖像作為二進制數據：

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

由於這個問題實際上與redux-observable無關，這里有一個工作示例，演示獲取二進制數據然后用它創建<img> ：

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

使用Angular 4構建Graph explorer時，遇到了同樣的問題。 在我們的例子中，在請求圖像時，我們必須將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();

然后在處理響應時，我們獲取blob URL並設置image元素的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)
);