async と await の処理について、eval 以外の解決策を知りたいです

Question

###実現したいこと
該当のソースコードで次のように並列で処理しています。

    Promise.all([
      wrap( func1 ), // 引数を渡したい
      wrap( func2 )
      ])

これに引数'apple'を渡して次のような実行をしたいのですが、こうするとエラーになります。

    Promise.all([
      wrap( func1('apple') ), // こうするとエラー
      wrap( func2 )
      ])

###該当のソースコード
以下の11行目が引数'apple'を渡したい行です。

ソースコードを実行する

// func1, func2 を並列処理しつつ、結果は順次処理していく
$(function() {

    // 結果は順次処理
    const wrap = async function(func) {
      const res = await func();
      console.log(res); 
      return res;
    }
    
    // func1, func2 を並列処理
    console.log("並列処理開始");
    Promise.all([
      wrap( func1 ), // 引数を渡したい
      wrap( func2 )
    ]).then(res=>{
        console.log(res);
        console.log("並列処理すべて終了");
    });

    // AJAXでデータを取得
    function func1(str=''){
      var def = new $.Deferred();
      console.log('start func1')
      setTimeout(function(){
          const ajaxResponse1 = [{name:str+'太郎'},{nane:str+'次郎'}];
          def.resolve( ajaxResponse1 );
      },1000);
      return def.promise();  
    }

    // AJAXでデータを取得
    function func2(){
      var def = new $.Deferred();
      console.log('start func2');
      setTimeout(function(){
          const ajaxResponse2 = [{name:'花子'},{nane:'良子'}];
          def.resolve( ajaxResponse2 );
      },2000);
      return def.promise();   
    }

});

###発生している問題・エラーメッセージ
引数'apple'を渡すと次のエラーになります。

Uncaught (in promise) TypeError: func is not a function

###考察・試したこと
正しいかわかりませんが、
wrap( func1 )
を
wrap( func1('apple') )
とすると、wrapの中で()があるためにこの時点で関数func1が実行されてしまうことが原因か？と考えています。

なので
wrap( "func1('apple')" )
という風に文字列で渡すようにして、evalで文字列を関数として処理する方法を試しました。

$(function() {

    // 結果は順次処理
    const wrap = async function(func) {
      const res = await eval(func); // evalで文字列を関数として処理する
      console.log(res); 
      return res;
    }
    
    // func1, func2 を並列処理
    console.log("並列処理開始");
    Promise.all([
      wrap( "func1('apple')" ), // 文字列で渡す
      wrap( "func2()" )         // 同じく文字列で渡す
    ]).then(res=>{
        console.log(res);
        console.log("並列処理すべて終了");
    });

/*-- 以下略 --*/

###質問
これによって実現できたように思えるのですが、evalは避けるべきとの記事を方々で目にします。

そこでevalを使うことなく引数'apple'を渡す方法を知りたいのですが、そのようなことは可能でしょうか？

Answer 1

何をしたいのかいまいちわかりませんが、wrap(func1.bind(this, 'apple'))とかwrap(()=>func1('apple'))とかすればできるかと思います。

Comments

[tarakorakko]

できました！ありがとうございます！
https://jsfiddle.net/dfguet96/

わかりにくかったですよね。少しコメントアウトを追加しておきました。

Answer 2

wrap( func1('apple') )
とすると、wrapの中で()があるためにこの時点で関数func1が実行されてしまうことが原因か？と考えています。

当たってると思います。

たぶん、↓こんな風に書きたいのでは?

wrap(func1, 'apple'),
wrap(func2),
wrap(func3, 'banana', 'orange'),
...

もしそうなら、
wrap()関数が、funcと任意数の引数(つまり可変長引数)を受け取れるようにすれば良いですね。

以下、サンプルです。

const w = function(f, ...args) {
  // ↑引数が何個来ようとも、
  // ↓それらを引数にしてfを呼ぶ。
  let res = f(...args);
  return res;
}

function f1(s) { return '[' + s + ']'; }
function f2() { return 'f2'; }
function f3(s, t) { return s + ', ' + t; }

w(f1, 'apple');             //=> "[apple]"
w(f2);                      //=> "f2"
w(f3, 'banana', 'orange');  //=> "banana, orange"

Comments

[tarakorakko]

なるほど関数と引数をそれぞれ渡し、引数は可変ですか。
うーん勉強になります。ありがとうございます。

[tarakorakko]

仰る方法でできました！ありがとうございます！
https://jsfiddle.net/1b9Lfdw4/

可変長引数で渡せると、wrapの中で引数をいじれる点が便利でしたので、ベストアンサーにさせて頂きました。