async/awaitの基礎

参考にする。

非同期キー

async

非同期関数をasync関数にするためにfunction()の前にasyncキーワードを追加します.async function()は、awaitキーワードが非同期コードを呼び出すことを可能にする.

function hello() { return "Hello" };
hello();

ここにasyncを貼ると、

async function hello() { return "hello" };
hello();

は、Promiseを返します.

Promise?

参考2-Promiseとは何ですか?
燒Promiseは主にサーバから受信したデータを画面に表示するために使用される.

$.get('url 주소', function(response) {
  // ...
});

APIを使用してサーバにデータを要求すると、画面にデータを表示しようとすると、データが受信されていないかのようにエラーが発生します.そこで、Promiseを使用してこれらの問題を解決します.

Promise's 3 States

璻Promiseには3つの状態(=Promiseの処理過程)がある.

保留(代替):非同期処理ロジックがまだ完了していません

new Promise();

// 호출할 때, 다음과 같이 콜백함수를 선언할 수 있고
// 인자로는 resolve, reject를 받는다.
new Promise(function(resolve, reject){
	// 함수 내용
});

Fulfilled(履行済み):非同期処理が完了し、プロセス結果値

に戻ります.

new Promise(function(resolve, reject){
  // 콜백 함수의 인자 resolve를 실행하면 Fullfilled 상태가 된다.
  resolve();
});

function getData(){
  return new Promise(function(resolve, reject){
    var data = 100;
    resolve(data);
  });
}

getData().then(function(resolvedData){
  console.log(resolvedData);
});

Rejected(失敗):非同期処理失敗またはエラーステータス

new Promise(function(resolve, reject){
  reject();
});

function getData(){
  return new Promise(function(resolve, reject){
    reject(new Error("Request failed"));
  });
}

getData().then().catch(function(err){
  console.log(err);
});

let hello = async function() {return "helloo"};
hello();

//화살표 함수를 이용한다면
let hello = async() => {return "he11o"};

//실제로는 fulfill Promise가 반환되기 때문에
//반환된 값을 사용하기 위해 .then() 블럭을 사용한다
hello().then((value) => console.log(value))

//짧게는
hello().then(console.log)

非同期キー

非同期関数がawaitキーワードとともに使用される場合、Promiseが完了するまで中断し、結果を返します.その後、他の実行待ちコードを停止するのではなく、実行を続行します.

async function hello(){
  return greeting = await Promise.resolve("hello");
};

hello.then(alert());

参考にする。