javascript - 如何使用 redux-observable 正确获取二进制图像？

Question

我正在尝试使用 redux-observable 获取图像。

基于 Microsoft Graph API , 它返回所请求照片的二进制数据。

我使用 Postman 成功获取了图像(它在结果中显示图像，因为它是二进制的)。

但是，当我尝试使用 redux-observable 时，我得到的response总是null，responseType总是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);
  });