TIL. async await

いつもfetchのみ使用していましたが、今回はasync awaitを使用しました.
これはpromiseとthenを簡単にするES 8文法です.
まず、async宣言方法はfunctionの前に書くかarrow functionの前に書くことができる.

//example 1

async function 함수 () {
	//코드자리
}

//example 2 

const 함수 = async() =>{
	//코드자리	
}

関数にコードをそのまま記述します.

함수.then().catch() 

このように使いますが、awaitはthen()を使わなくてもいいです.
awaitは、私が宣言した関数がすべて実行されるのを待っています.実行が完了するまで実行しません.
話がちょっと難しいので、自分でログインした時に関数を書いてみました.

try catch

await

res

axios

ここで使う4種類
1.tryが成功したときに実行するコードcatchは失敗したときに実行するコードです
2.awaitはresという定数にpostリクエストを入れ、postリクエストの完了を待つ.
3.resは成功時に条件文として、実行したいコードを追加します.
4.axiosは1つのライブラリで、主に応答に用いて、JSONデータに対して自動変換を行って、そしてPromise APIをサポートする.詳しい内容は次回書きます.

const fetchLogin = async () => {
    const { employee_number, password } = userInfo;

    try {
      const res = await axios.post(
        `${BASE_URL}/users/signin`,
        {
          employee_number,
          password,
        },
        {
          headers: {
            'Content-Type': 'application/json',
          },
        }
      );
      if (res) {
        localStorage.setItem('token', res.data.token);
        history.push('/calendar');
      }
    } catch (err) {
      switch (err.response.status) {
        case 401:
          alert('You do not have permission to access.');
        default:
          alert('Please check the employee number and password.');
          break;
      }
    }
  };

このコードを書く前に、私は勉強しなかったので、勝手にコードを打っただけです.
そしてそのコードはasync waitではありません.
当時作成されたコード

const fetchLogin = async () => {
    const { employee_number, password } = userInfo;

    try {
      const res = await axios.post(
        `${BASE_URL}/users/signin`,
        {
          employee_number,
          password,
        },
        {
          headers: {
            'Content-Type': 'application/json',
          },
        }
      ).then(res => {
        localStorage.setItem('token', res.data.token);
        history.push('/calendar');
      } 
    }
  };

よく覚えていませんが、そうです.起動しましたが、async待ちではありません.
これはconst resとして保存されたwait promiseではなくpostリクエストのコードを使用します.
つまり、待っていない.