javascript - forEach 完成后返回 objectArray es6+ Angular

Question

我有一个要求，我需要使用像“https://videoapi.com/api/video.mp4”这样的视频链接调用rest api ' 然后为每个视频对象创建一个缩略图，我已经完成了大部分工作，但是当我尝试使用我之前创建的缩略图返回一个新的对象数组时遇到问题，过程就像这个:

1. 获取api数组对象数据

2. 对于数组对象中的每个元素，使用我拥有的 createThumbnail() 函数创建缩略图，该函数返回一个 base64 url​​ 字符串。

3. 在循环中，我使用 api 对象属性和新的属性调用创建一个新对象videoThumbnail 推送我从上述函数获得的 base64 字符串。
4. 我需要推送每个具有缩略图网址的新对象一个新的数组对象并在完成时返回。
5. 使用新的数组对象进行任何操作。

我在第 4 部分之前做得很好，我可以创建并填充新对象，但我不知道如何让函数等到循环完成，如果我尝试返回新对象，我会得到一个空数组.

loadThumbnail(list: any){
  let objArrayTemp = [];
  let objTemp = {};
  list.forEach((element,i) => {
  // here i'm creating the base64 strings
  this.createThumbnail(element.videoSrc).then(dataUrl => {
  // here i'm creating the new object for every element in the list
      objTemp = { ...element, videoThumbnail: dataUrl};
      // i want to push every element here
       objArrayTemp.push(objTemp)
     });
  });
 //i want to return the object when the loop finishes the populating process
  return objArrayTemp;
}
console.log(this.loadThumbnail(list)) // this return --- > []

这是我的 createThumbnail() 函数

async createThumbnail(thumbnail): Promise<any> {
  return new Promise(resolve => {
    let src = thumbnail; 
    let video = document.createElement('video');

    video.src = src;

    video.width = 360;
    video.height = 240;

    let canvas = document.createElement('canvas');
    canvas.width = 360; 
    canvas.height = 240;
    let context = canvas.getContext('2d');

    video.addEventListener('loadeddata', function() {
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      let dataURI = canvas.toDataURL('image/jpeg');
     resolve(dataURI)
    });
 })
}

这是带有完整重新创建代码的 stackblitz:https://stackblitz.com/edit/angular-hhquzg .

感谢您的帮助。

Answer 1

更改loadThumbnail如下

loadThumbnail(list: any) {
    let objArrayTemp = [];
    let objTemp = {};
    return Promise.all(list.map((element, i) =>  
        this.createThumbnail(element.videoSrc)
        .then(dataUrl => ({...element, videoThumbnail: dataUrl}))
    ));
}

注意:loadThumbnails 必然返回一个 Promise，因为异步

所以要“使用”它，就像:

this.loadThumbnail(list).then(console.log)

此外，您还可以删除

中的 async

async createThumbnail(thumbnail): Promise<any> {

因为你从不使用await，并且无论如何都会返回一个Promise