redux-observableを使用して画像を取得しようとしています。
Microsoft Graph APIに基づいて、要求された写真のバイナリデータを返します。
Postmanを使用して画像を取得することに成功しました（バイナリであるため、結果に画像が表示されます）。
私が使用しようとすると、しかし、Reduxの-観察可能な、応答私が得たが常にありnull、そしてresponseTypeは、常にではないjsonに関係なく、私が与える何のContent-Typeのような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
}
まず、redux-observableとRxJSが別々のものであることを明確にしたいと思います。この質問は実際にはRxJSの質問であり、redux-observableは小さく、ほとんどすべてを慣用的なRxに委ねているため、（redux-observableを使用している場合でも）遭遇するほとんどすべての質問があります。これは重要です。なぜなら、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);
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加