Question

我一直在试图解决这个问题，但是仍然遇到麻烦。我有一个对象数组，我想做的是将slug的键更新为ID，并将其值更改为从API返回的博客文章的ID。我也想对关键FeatureImage进行相同的操作，在该函数中，我从API返回数据，然后更新此对象数组中的值。无论如何，我都没有将弹头与featuredImage关联，除了它们在对象的原始postData数组中的显示方式。如果我要进行API调用并且还要处理数据，那么有一种方法可以确保我不会在这里弄乱我的键/值对。我一直在努力的是，我似乎无法正确地保持顺序，并且我的数据最终在我的最终对象数组中以错误的顺序出现。任何帮助将非常感激。

const postData =[
{ slug: sample-post-1, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/rustic20coffee20table.jpeg%3Ft=1528912781831-6.jpeg' },
{ slug: sample-post-2, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/Amazing-Table-For-Flamboyant-Furniture-Home-Design-Ideas-With-Rustic-Furniture-Coffee-Table.jpg%3Ft=1528912781831-6.jpeg' },
{ slug: sample-post-3, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/envoy-lookout-rooftop-11b-780x520.jpg%3Ft=1528912781831-6.jpeg'  },
{ slug: sample-post-4, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/mountain-landscape-wallpaper-29048-29765-hd-wallpapers.jpg%3Ft=1528912781831-6.jpeg'},
{ slug: sample-post-5, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/mountain-landscape-wallpaper-29048-29765-hd-wallpapers.jpg%3Ft=1528912781831-6.jpeg' }
]

这是我要运行的功能，但这是我尝试根据项目不正常的响应创建新对象的地方。

const uploadImages = async (postData) => {
  const newImages = [];
    try {
     await Promise.all(postData.map(async featuredImage => {
       const option = {
       method: 'POST',
       url: fileAPIURL,
       qs: {
        access_token: ACCESS_TOKEN,
       },
       headers: {
        'content-type': 'multipart/form-data'
       },
       formData: {
         folder_paths: 'Blog_Media',
         image: request(featuredImage)
       },
       json: true
    }
    return request(option)
      .then((response) => {
        response.objects.map((content) => {
          return newImages.push(Object.assign({ 
            featuredImage:content.url }));
          });
        })
     }))
     return newImages;
  } catch (error) {
    throw new Error('Cannot upload image to file manager, try checking 
    your URL');
  }  
}

Answer 1

当您并行运行一堆异步操作时，它们可以按任何顺序完成它。所以，当您这样做时：

newImages.push(...)

newImages数组将按照您的并行异步操作完成的顺序进行。那将是一些随机顺序。

但是，Promise.all()将按照正确的顺序保留数据，如果您让它为您管理返回的数据。因此，您可以在postData.map()内部返回一个对象数组。然后Promise.all()将使该数组相对于其他数组保持正确的顺序。然后，在Promise.all().then()的末尾，将有一个数组数组（均按正确的顺序排列），因此，要按正确的顺序将其整理成单个平面数组，所需要做的就是将其展平。

const uploadImages = (postData) => {
    return Promise.all(postData.map(featuredImage => {
        const option = {
            method: 'POST',
            url: fileAPIURL,
            qs: {
                access_token: ACCESS_TOKEN,
            },
            headers: {
                'content-type': 'multipart/form-data'
            },
            formData: {
                folder_paths: 'Blog_Media',
                image: request(featuredImage)
            },
            json: true
        }
        return request(option).then((response) => {
            return response.objects.map((content) => {
                return {featuredImage: content.url};
            });
        });
    })).then(results => {
        // flatten the array of arrays into a single array
        return [].concat.apply([], results);
    }).catch(error => {
        throw new Error('Cannot upload image to file manager, try checking your URL ');
    });
}

此外，您似乎并没有真正在使用async / await来删除这里有用的内容。

我不了解的代码部分是您通过的地方：

image: request(featuredImage)

作为另一请求formData的一部分。由于formData将返回一个承诺，因此这将对request(featuredImage)作出承诺。那真的是你想要的吗？

正确关联键/值对

1 个答案: