08. TIL (callback function, promise,async)

5669 ワード
function JavaScript TIL promise 史伝研究 callback async テキストリンク
JavaScriptコールバック関数の概念を学習する時間.
今はまだ混同されている部分がありますが...一生懸命勉強しましょう.🔥
[DREAMコード講義を参考に創作した!]

1. callback function

  • 以降、私が渡した関数を読み込みます.
    ✔¥もっと上品に言えば?
    パラメータを介して関数を渡し、関数内部で実行する関数!
  • javaは同期され、アップグレードから作成順に実行されます.
    アップグレード:var、機能の宣言.
  • コールバック関数はarrow関数に変換され、1行として表すことができます!
    • 1)同期コールバックと非同期コールバック
  • 同期コールバック:
    function printImmidiately(print) {
	print();
}
printImmidiately(()=> console.log('hello')); ```
    • を直ちに実行
  • 非同期コールバック
    function printWithDelay(print, timeout) {
	setTimeout(print,timeout);
}
printWithDelay(()=>console.log('async callback'),2000);
  • settimeoutを使用して、印刷する文とdalayの時間を指定できます.(1000秒は1秒、2000は2秒!)

    • 2. promise


    object
  • は、非同期処理を簡素化するのに役立ちます
  • をcallback関数の代わりに使うのは役に立ちますか?乱発するとcallback地獄のように...複雑なコードになる可能性があります.
  • の状態(状態)と結果(結果)を知ることが重要です!
  • 生産者と消費者の違い
  • ステータス:保留中->フル(正常に解決)または拒否済み(失敗)
    • 1) Producer
  • 新規承諾の作成時に自動的に実行
    ex) 
    const promise = new Promise ((resolve, reject) => { 
	console.log('doing something...');
	setTimeout(()=> {
	resolve('dodam');
	reject (new Error('no network'));
   // 둘 중 하나만 활성화해서 확인해보기!
	},2000);
});
  • 時間の作業が必要です.ファイル
    • を非同期で読み出すネットワーク動作.
  • 関数は、成功した送信と失敗した送信の結果
    • を含む.
    ユーザが
  • ネットワーク要求を要求した場合にのみ、不要な通信が発生する.
    • 2) Consumer - then,catch,finally
  • . then
    :正常な実行を約束した場合、
    resolveの値はパラメータとして入力されます.
    同じ承諾を返し、出力をキャプチャすることもできます.値を渡すこともできるし、非同期承諾
    • を渡すこともできる.
  • . catch
    :拒否時転送値
  • .finally
    :成功するかどうかにかかわらず、
    • ex)基本形状
    Promise
	.then((value)=> {
	console.log(value);
	})
	.catch(error =>{
		console.log(error);
	})
	.finally(()=> {
		console.log('finally');
	});
    3) promise chaning

  • 接続承諾の形態.概念を直接実施し、確立しましょう.
    ex)
    const fetchNumber = new promise ((resolve, reject =>{
	 setTimeout (()=> resolve(1),1000);
}));

fetchNumber
.then (num => num * 2) //2
.then (num => num * 3) //6
.then (num => {   //6
	 return new promise ((resolve, reject) => {
	 setTimeout (()=> resolve(num -1),1000); //5
	});
})
.then (num => console.log(num)); //5 출력됨 ```
    • 4) Error handling
  • の承諾を利用して、誤った解決方法を提出することができます!
    • 3つの承諾を返します.
    1秒ごとに3秒出力するように指定します
    const getHen = () =>
 	new promise ((resolve, reject) => {
		 setTimeout(() => resolve ('닭'),1000);
	 });
const getEgg = hen =>
	new promise ((resolve,reject) =>{ 
		setTimeout(()=> resolve(`${hen} => egg`),1000);		
		setTimeout(()=> reject (new Error (`error! ${hen} => 계란 `)), 1000);
	});
const cook = egg =>
	new promise((resovle, reject) => {
		setTimeout(() => resolve (`${egg}=> fried`),1000);
	});
    /.次に値を指定します.省略可能な内容を省略し、コードを整理する-
    getHen()
	.then(hen=> getEgg(hen))   
	.then(egg => cook(egg))
	.then(meal => console.log(meal));
    もし卵が届かなかったら?
    上部エラーを処理するためにcatchを追加
    getHen() //
.then(getEgg)
.catch(error => {
	return '빵';
})

    3. async, await

  • 約束をより簡潔に整理する方法
  • 基本構文
    async function 함수명 (){
await 비동기처리메서드명 ();
} ```
    • 1) async
    ex)1台のサーバが10秒のネットワーク要求を必要とすると仮定する.
    promiseとasyncでコードを書けば?
    function  fetchUser() {
	return 'dodam';
}


1) Promise 로 쓰면?

function  fetchUser() {
	return new Promise ((resolve, reject)=> { // do network request in 10secs...
		resolve ('dodam');
	});	
} 

// resolve나 reject를 쓰지 않으면 계속 pending 상태로 남아있음


2) async 사용하면?
async function fetchUser() {
	// do network request in 10secs...
		return ('dodam');
	};	

const user = fetchUser();
user.then(console.log);
console.log(user);
- fatchUser는 promise를 return한다.
    2) awiat
  • asyncでのみ使用できます.
    • ex)
    function delay(ms) {
	return new Promise (resolve => setTimeout(resolve,ms));
}

async function getApple() {
	await delay (3000); // 딜레이가 끝날 때까지 기다려줌
	throw 'error';
	return 'apple';
}

async function getBanana() {
	await delay (3000);
	return 'banana';
}



1) promise를 쓴다면?
function getBanana() {
	return delay(3000)
	.then(()=> 'banana');
}


function pickFruits() {
	return getApple().then (apple => {
		return getBanana().then(banana => `${apple}+ ${banana}`);
	});
}

pickFruits().then(console.log);

2) async로 표현하면?
async function pickFruits () {
	try {
	const apple = await getApple();
	const banana = await getBanana();
	} catch {
	 return `${apple}+ ${banana}`;
}

pickFruits().then(console.log);

* 병렬로 표현하기 (기다릴 필요가 없기 때문에) 
async function pickFruits () {
	const applePromise = getApple();
	const bananaPromise = getBanana();		
	const apple = await applePromise;
	const banana = await bananaPromise;
	 return `${apple}+ ${banana}`;
}

pickFruits().then(console.log);
    3)有用な承諾APIS
  • 承諾all:転送アレイ、並列集約
  • コミットメントコンテスト:パラメータとしてITERABLEコミットメントの最初の完了と同じ方法で同じ結果値を完了し、伝達するコミットメントを返します.
    ex) 
    •  function pickAllFruits() {
	 return Promise.all([getApple(), getBanana()]) 
	 .then(fruits => fruits.join('+')
		);
 }


 function pickOnlyOne() {
	 return Promise.race([getApple(),getBanana()]);
 }

 pickOnlyOne().then(console.log);
    コンセプト
  • の深化学習を行った後、asyncと再び深く学習することを望んでいます.今まで、私は私の概念が丸いと感じて、基礎の概念から始めて、更によく勉強します:-)
    • [2021.08.02] React Foundation 2
    Javaの起動