Promise .then() 链：第二个 .then 在第一个之前运行？ o.0

Question

我正在尝试从 .then 结构中的 blob 数据创建一个新的 File 对象，然后在第二个 .then 中读取该文件的信息。

但是第二个在第一个结束之前运行，所以文件对象还没有被填充。

这是正常行为吗？我应该创建一个异步函数，在第一个函数中调用，然后确保第二个函数在之后被严格调用吗？

      let output = {file: {}, file_infos: {}},
          image = FileAPI.Image(src_file);
      await Promise.all(Object.keys(parameters).map(async (parameter_name) => { // Pass file threw all modifiers (resizing, rotation, overlaying)
        try {
          image = await FileMethods[parameter_name](image, parameters[parameter_name]);
            return image;
        }
        catch(err) {
          console.log(err);
        };
      }))
      .then((output_image) => {
        output_image[0].toBlob((blob) => {
          output.file = new File([blob], src_file.name); // Need this to be fullfilled before step2
          console.log('step1');
        });
      })
      .then(() => {
        console.log('step2');
        FileAPI.getInfo(output.file, (err/**String*/, infos/**Object*/) => {
          if( !err ){
            output.file_infos = infos;
          } else {
            console.log("this is triggered because output.file isn't filled yet");
          }
        })
      });
      // console.log(output);
      return output;

控制台显示：

step2 this is triggered because output.file isn't filled yet step1

感谢您的帮助:)

Answer 1

两个 .then 中的两个异步函数不返回 Promise，所以首先它们需要“Promisified”，因为你已经在使用 async/await，所以不要使用 Promise .then 链

const image = FileAPI.Image(src_file);
const output_image = await Promise.all(Object.keys(parameters).map(async(parameter_name) => {
    try {
        image = await FileMethods[parameter_name](image, parameters[parameter_name]);
        return image;
    } catch (err) {
        console.log(err);
    };
}));
const file = await new Promise((resolve, reject) => output_image[0].toBlob((blob) => 
    resolve(new File([blob], src_file.name))
));
const file_infos = await new Promise((resolve, reject) => FileAPI.getInfo(file, (err, file_infos) => {
    if (!err) {
        resolve(file_infos);
    } else {
        reject("this is triggered because output.file isn't filled yet");
    }
));
return {file, file_infos};

---

关于

const output_image = await Promise.all(Object.keys(parameters).map(async(parameter_name) => {
    try {
        image = await FileMethods[parameter_name](image, parameters[parameter_name]);
        return image;
    } catch (err) {
        console.log(err);
    };
}));

你实际上是在做return await FileMethods[parameter_name](image, parameters[parameter_name]) - 所以，在这种情况下你真的不需要异步/等待模式，只需在 .map 中返回 Promise

const output_image = await Promise.all(Object.keys(parameters).map((parameter_name) => 
    FileMethods[parameter_name](image, parameters[parameter_name]);
));

或者，甚至更好（在我看来）

const output_image = await Promise.all(Object.entries(parameters).map((p_name, p_value) =>
    FileMethods[p_name](image, p_value)
));

---

或者，使用 Promise .then 链而不使用 async/await

const image = FileAPI.Image(src_file);
return Promise.all(Object.keys(parameters).map(parameter_name => FileMethods[parameter_name](image, parameters[parameter_name])))
.then(output_image => new Promise((resolve, reject) => output_image[0].toBlob((blob) => 
    resolve(new File([blob], src_file.name))
)))
.then(file => new Promise((resolve, reject) => FileAPI.getInfo(file, (err, file_infos) => {
    if (!err) {
        resolve({file, file_infos});
    } else {
        reject("this is triggered because output.file isn't filled yet");
    }
)));

Answer 2

.toBlob() 立即返回，因为它使用异步回调模式。

您想要的是返回一个在工作完成时解决的承诺。所以你可以这样做：

.then((output_image) => {
    return new Promise((res, rej) => {
      output_image[0].toBlob((blob) => {
        output.file = new File([blob], src_file.name); // Need this to be fullfilled before step2
        console.log('step1');
        res();
      });
    });
  })

Answer 3

toBlob 可能是异步的。将第一个 .then 更改为：

.then((output_image) => {
  return new Promise((resolve) => output_image[0].toBlob((blob) => {
    output.file = new File([blob], src_file.name); // Need this to be fullfilled before step2
    console.log('step1');
    resolve();
  }));
})