Compressor.js　同期

現在、Compressor.jsを使って画像の圧縮を行っています。
しかし.compressor.jsのsucessの中身が非同期で動いてしまいます。
[わからないこと]
successを同期的に動かしたい。

const CompressorFunc = (file, uid, name) => {
  console.log("start compress");
  if (!file) {
    return;
  }
  new Compressor(file, {
    quality: 0.6,
    //successが後から実行される。
    success(blob) {
      firebase
        .storage()
        .ref()
        .child("work/" + uid + "/1/" + name)
        .put(blob);
    },
    error(err) {
      console.log(err);
    },
  });
  console.log("end compress");
};

export default CompressorFunc;

ここで外部からfileを渡し,CompressorFuncを呼ぶと、successの中が後から動いていてしまいます。
ここを同期的に動かしたいのですが、解決策はあるのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

同期的に動かしたい

Promise化するのが簡単に思います。

MDN Promiseを使う

古いコールバック API をラップする Promise の作成セクションより
ベストプラクティスは、問題のある関数を可能な限り低いレベルでラップした上で、二度と直接呼ばない

ご質問コードのCompressor.js による圧縮機能だけをPromise化するのが良いと思います

追記）以下、試していませんので、答案に過ぎませんが…。

javascript
1const promisfiedCompressor = ( file, q=0.6 ) => {
2  // Promise を返却
3  return new Promise((resolve, reject) => {
4
5    new Compressor(file, {
6      quality: q,
7      success(blob) {
8        resolve(blob); // Promise を 成功終了
9      },
10      error(err) {
11        reject(err); // Promise を 異常終了
12      }
13    }); // Compressor.js 
14
15  });
16}
17
18/*
19 動作確認
20// {Promise}.then() の場合
21promisfiedCompressor(file) // Promise が返却される
22  .then( blob => {
23    firebase
24      .storage()
25      .ref()
26      .child("work/" + uid + "/1/" + name)
27      .put(blob);
28  });
29
30// await を使う方法も考えられる(割愛)
31*/
32
33// module として export