await Promise を使った非同期処理

Question

下記のコードの await new Promise<Login>(async (resolve, reject)ところで質問です。
Promiseもawaitも非同期をするためのものだと思うのですがなぜPromiseとawaitの両方を使っているのでしょうか？
わかる人いましたらご教授お願いしたいです。

  export const postLogin(email: string, password: string) {
    interface Login {
      email: string;
      password: string;
    }

    const res = await new Promise<Login>(async (resolve, reject) => {
      const path = '/login';
      try {
        const response: Login = await Axios.get(path, {
          params: { email, password },
        });
        resolve(response);
      } catch (err) {
        reject(err);
      }
    });
    return res;
  }
}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
追記

  export const postLogin(email: string, password: string)  {
    const path = '/login';
      try {
        const res: Login = await Axios.get(path, {
          params: { email, password }
        )}; resolve(res);
      }
      catch(err) {
        rejects(err)
      }
    return res;
  }

エラ-メッセージ
Parsing error: ',' expected.eslint
名前 'res' が見つかりません。ts(2304)
'try' が必要です。ts(1005)

Answer 1

なぜPromiseとawaitの両方を使っているのでしょうか？

同一行にPromiseとawaitがいるためややこしくなっているのではないでしょうか？
ざっくりとした解釈になりますが、要するに下記と同じことをしています。

// 最終的にresponseをresolveするpromise
const promise = new Promise<Login>(async (resolve, reject) => { 
  // ...略
  resolve(response);
  // ...略
});

// promise内のresolveを待ってその結果を取得(あくまで感覚的な表現です)
const res = await promise;

const promise = ...とconst res = ...の間で色々と処理を挟む場合もありますが、この例ではそういった処理もないため同一行で記載されているのかもしれません。

ちなみに、axios.getはPromiseを返してくれるので独自でnew Promiseを書く必要はないと思います。

const path = '/login';
const res : Login = await Axios.get(path, {
    params: { email, password },
});

Comments

[rwewe]

回答ありがとうございます！！
new Promiseを書く必要がなくなった場合のコードとは上記ので合っていますか？

[nekoniki]

> new Promiseを書く必要がなくなった場合のコードとは上記ので合っていますか？
その認識です

[rwewe]

try {
const response: Login = await Axios.get(path, {
params: { email, password },
});
resolve(response);
} catch (err) {
reject(err);
}
});
return res;
上記のはいらないのでしょうか？

[nekoniki]

エラー処理はawaitの呼び側をtry,catchで囲うか、メソッドチェーンでcatchを指定すれば同様の処理が再現できます。
下記に詳細な解説が載っています。
https://qiita.com/soarflat/items/1a9613e023200bbebcb3

[rwewe]

ありがとうございます。
参考にしてやってみましたが上記のエラーが出てしまいます。

[nekoniki]

1つ目のエラーはおそらくlintの設定なのでお手元の設定を確認ください。おそらく末尾カンマ等に関する設定です。
2つ目,3つ目はブロックの位置がおかしかったです。
また、resolveはreturn,rejectは適宜エラー処理に置き換えましょう。

export const postLogin(email: string, password: string) {
const path = '/login';
try {
const res: Login = await Axios.get(path, {
params: { email, password }
});
return res;
}
catch(err) {
console.log(err);
}
}