从Promise中提取图像数据ReactJS和Axios

编程问答 2022-06-12

问题描述

我如何访问以Promise []形式存储在ES6阵列中的数据？我正在从后端加载数组，每个对象都有图像的URL。因此，为了渲染图像，我必须异步/等待获取每个对象的图像。我没有返回Base64映像，而是获得了将映像嵌入到promise中的承诺。我需要一种读取图像数据的方法。有关返回对象的结构，请参见下图。

请注意，我在后台使用 axios ，而不提取API

Image field contains a promise instead of Base64 data

下面是用于加载列表然后按两个步骤加载图像的功能和服务方法。

1.1 Axios服务方法 

npm run build

1.2 ReactJS主要功能 

listAllItems() {

    return axios.get(API_URL + "docman/items/list/all");
}

2.1 Axios图像服务方法 

    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.2 ReactJS图像加载器功能 

loadImage = (url) => {

    return axios.get(API_URL + url,{ responseType: 'arraybuffer' });
}

3.1从后端获取的Json列表 

 async loadImage(imageUrl) {

    try {

        return await ImageService.loadImage(imageUrl)

    } catch (e) {

        return '';
    }
}

解决方法

尝试做image.then((data) => { // console.log(data) })

,

当您设置状态时，您将使用对象列表来设置新状态，该对象列表的图像值是一个承诺。您是否不应该仅在至少一个诺言解析为真实图像时才更新状态？ 你不能做类似的事情 this.loadImage（item.image）.then（（imageData => setState（appropriate State）））？

async-awaitaxiosbase64reactjsreactjs