[英]Extracting images data from Promise (ReactJS and Axios)
How do I get access to data stored as a Promise[] in ES6 array?如何访问以 Promise[] 形式存储在 ES6 数组中的数据? I am loading an array from the backend and each object has a url for the image.我正在从后端加载一个数组,每个对象都有一个图像的 url。 So in order to render the image I have to async/await fetch the images for each object.所以为了渲染图像,我必须异步/等待为每个对象获取图像。 Instead of returning a Base64 image, I get I promise with the image embeded deep in the promise.我得到的不是返回 Base64 图像,而是将图像嵌入到承诺的深处。 I need a way to read the image data.我需要一种方法来读取图像数据。 See image below for return object structure.有关返回对象结构,请参见下图。
Please note that i use axios in the background and NOT the Fetch API请注意,我在后台使用axios而不是Fetch API
Below are the functions and service methods used to load the list and then the images in 2 steps.下面是分两步加载列表和图片的函数和服务方法。
1.1 Axios service method 1.1 axios服务方式
listAllItems() {
return axios.get(API_URL + "docman/items/list/all");
}
1.2 ReactJS main function 1.2 ReactJS 主要功能
async componentDidMount() {
try {
const items = await DocmanService.listAllItems();
const itemsData = items.data;
const data = await itemsData.map(item => {
const image = this.loadImage(item.image);
return { ...item, image: image }
})
this.setState({ items: data });
} catch (e) {
console.log(e);
}
}
2.1 Axios images service method 2.1 axios图片服务方式
loadImage = (url) => {
return axios.get(API_URL + url, { responseType: 'arraybuffer' });
}
2.2 ReactJS image loader function 2.2 ReactJS图片加载器功能
async loadImage(imageUrl) {
try {
return await ImageService.loadImage(imageUrl)
} catch (e) {
return '';
}
}
3.1 Json list fetched from backend 3.1 从后端获取的 Json 列表
[
{
"id": "1",
"uuid": "1c0a33af-4e78-4823-b84e-f3b5464db2af",
"identifier": "EN ISO 8402",
"title": "EN ISO 8402 Quality Management - Vocabulary",
"folder": "e347fef9-0a76-4e62-b7f2-c78e9f88355b",
"media": "FILE",
"path": "document/id/105",
"image": "image/id/106",
"format": "PDF",
"authors": "",
"publishers": "",
"created": "2020-09-22T14:56:31.316+00:00",
"published": null,
"version": "1994",
"status": null
},
{
"id": "2",
"uuid": "16a0e658-b444-4b60-bf18-ba2786d5fb00",
"identifier": "ISO 14001",
"title": "ISO 14001 Environmenatl Management Systems - Requirements with Guidance for Use",
"folder": "e347fef9-0a76-4e62-b7f2-c78e9f88355b",
"media": "FILE",
"path": "document/id/107",
"image": "image/id/108",
"format": "PDF",
"authors": "",
"publishers": "",
"created": "2020-09-22T14:56:31.659+00:00",
"published": null,
"version": "2004",
"status": null
},
-
-
]
尝试做image.then((data) => { // console.log(data) })
When you setState you are setting the new state with a list of objects with an image value that is a promise.当您 setState 时,您正在使用具有作为承诺的图像值的对象列表设置新状态。 Shouldn't you update the state only when at least one of the promise resolved to a real image?难道您不应该仅在至少一个承诺解析为真实图像时才更新状态吗? Couldn't you do something like this.loadImage(item.image).then((imageData=>setState(appropriate State)))?你不能做类似 this.loadImage(item.image).then((imageData=>setState(适当的 State))) 的事情吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.