async/await

13331 ワード
await async テキストリンク

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());
    参考にする。
    Unittestテストケーステストセットに追加された操作例
    RN FlatList