Axiosを使った非同期処理のやり方

Question

前提・実現したいこと

axoisを使ってLoginボタンを押したときのposｔの処理を実装しているのですがaxiosの処理のところでエラーになってしまいます。
エラー内容は下記の内容です。
環境は
react,typescriptを使っています。

どう直したらいいのかがわからなかったので質問させていただきました。
わかる人がいましたらご教授お願いしたいです。

発生している問題・エラーメッセージ

エラーメッセージ
・Promise executor functions should not be async.eslintno-async-promise-executor
・　型 'AxiosResponse<any>' の引数を型 'Login | PromiseLike<Login>' のパラメーターに割り当てることはできません。
  プロパティ 'then' は型 'AxiosResponse<any>' にありませんが、型 'PromiseLike<Login>' では必須です

該当のソースコード

  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 = await Axios.get(path, {
          params: { email, password },
        });
        resolve(response);
      } catch (err) {
        reject(err);
      }
    });
    return res;
  }
}

Answer 1

Login型やresponse,resの詳細が不明なのでなんともいえませんが・・・

Axios.getの戻りがAxiosResponse<any>型になっているからだと思います。
最終的に返したいのはresではなくresの中にあるLogin型の値だと思うので、そのあたりを見直すとよいと思います。

Comments

[rwewe]

返信ありがとうございます。
Loginの型はinterfaceで定義してるのですが、型がおかしいということでしょうか？

[maisumakun]

> 型がおかしいということでしょうか？

axiosは汎用のライブラリである以上、通信結果の型は特に指定しない限りanyです。キャストなりジェネリクスなりで型を合わせる必要があります。

[nekoniki]

というよりかresponseの型がおかしいのではないでしょうか？

const res = await new Promise<Login>(async (resolve, reject) => {
の行でLoginもしくはPromiseLike<Login>型を返すのを宣言しているにもかかわらず、
resolve(response);
でAxiosResponse<any>型のresponseを返しているため発生していると思われます。

[rwewe]

responseにLoginの型をつけてあげればいいということでしょうか？

[nekoniki]

> responseにLoginの型をつけてあげればいいということでしょうか？
responseの中身が不明なためなんともいえません。`/login`というエンドポイントがどんな結果を返すかによります。

[rwewe]

返す値は
{
id; 1,
name: 太郎
}
です

[nekoniki]

responseの値が
{
id; 1,
name: 太郎
}
であれば、responseの型を宣言すれば通ると思います。
下記の通りにしてみてはいかがでしょうか？
const response : Login = await Axios.get(path, {
params: { email, password },
});

[rwewe]

ありがとうございます！！！
もう一つの・Promise executor functions should not be async.eslintno-async-promise-executorエラーなのですがこれはlintの設定を変えないといけないのでしょうか？？

await new Promise<Login>(async (resolve, reject)　なのですが asyncは非同期処理でPromiseも非同期処理だと思うのですがなぜこのコードはpromiseとasyncを二つとも使っているのでしょうか？

質問ばかりしてしまい大変申し訳ないです、、、

Answer 2

わざわざPromiseをnewする必要そのものがないかと思います。

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

（型は適当に合わせてください）

Comments

[rwewe]

返信ありがとうございます。上記のコードと自分のコードの違いがよくわからないのですがどこが変わったのでしょうか？

[maisumakun]

> どこが変わったのでしょうか？

new Promiseを行わず、axiosの返すPromiseをそのままawaitで回収するようにしています。