ES 6学習まとめ:async/await

10249 ワード
テキストリンク

await/async


Promiseに代わって、より快適で美しい体験を実現
Promiseの代わりに使用します.
関数宣言時にasyncと宣言し、非同期関数として宣言します.
内部からfetch,jsonなどの関数応答を受信する必要がある場合は,awaitを先に記述し,受信を非同期で待つ.
//promise 로 작성한 코드
const getMoviesPromise = () => { 
    fetch("https://yts.mx/api/v2/list_movies.json")
        .then(res => res.json())
        .then(json => console.log(json))
        .catch(e => console.log(e));
};

//async await 로 작성한 코드
const getMoviesAsync = async() => {
    const response = await fetch("https://yts.mx/api/v2/list_movies.json");
    const json = await response.json();
    console.log(json);
}

getMoviesAsync();

try ~ catch, finally


try、catch文でエラーを簡単に処理し、完了時に処理できます.
const getMoviesAsync = async() => {
    try{
        const response = await fetch("https://yts.mx/api2/v2/list_movies.json");
        const json = await response.json();
        console.log(json);
    }
    catch(e){
      //catch 문에서 에러를 수신하여 처리할 수 있다.
        console.log(e);
    }
    finally{
      //성공, 실패 등 모든 처리 완료가 끝나면 해당 구문이 실행된다.
        console.log('done');
    }
}

Parallel Async Await


async wait関数を同時に呼び出す方法
promise allは、複数のfetch関数を呼び出し、リターンを受信する.
const getMoviesAsync = async() => {
    try{
        const [movieRes, upcomingRes] = await Promise.all([
            fetch("https://yts.mx/api/v2/list_movies.json")
            , fetch("https://yts.mx/api/v2/movie_suggestions.json")
        ]);

        const [movieJon, upcomingJson] = await Promise.all([
            movieRes.json()
            ,upcomingRes.json()
        ]);

        console.log(movieJon);
        console.log(upcomingJson);
    }
    catch(e){
        console.log(e);
    }
    finally{
        console.log('done');
    }
}
[PS]ユニホーム(LV 1)
[erlang]高および下のログ出力テクニック