javascript - Promise .then() 链 : second . 然后在第一个之前运行？ 0.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;

控制台显示:

步骤2
这是因为 output.file 尚未填充而触发的
步骤1

感谢您的帮助:)

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);
    };
}));

你实际上是在做returnawaitFileMethods[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)
));

<小时/>

Alternatively, to use Promise .then chains and no 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");
    }
)));