[JS] promise
2764 ワード
出典:YouTube DREAMコードJavaScript
Promise
Promise
Promise is a Javascript object for asynchronous operation.
非同期操作を実行する場合、コールバック関数の代わりに使用できるオブジェクトを使用できます.
指定した機能を長時間実行した後、機能が正常に動作している場合は、成功したメッセージと指定した結果値が送信されます.問題が発生するとエラーが渡されます.
宿題
1.ステータスプロセスが実行機能、成功または失敗の状態にある
2.生産者と消費者の違い.必要なデータを提供する人と、データを書き込む人の違いを理解します.
State: pending -> fulfilled or rejected
Producer vs Consumer
1. Producer
when new Promise is created, the executer runs automaticallly. const promise = new Promise((resolve, reject)=>{
//doing some heavy work(network, read files)
console.log('doing something...')
setTimeout(()=>{
//resolve('ellie')
reject(new Error('no network'));
}, 2000);
});
拒否():主にerrorobjectを介して値を渡します.
2. Consumers
その後、catch、finallyなどで値を取得できます.promise//
.then(value =>{
console.log(value);
})
.catch(error =>{
console.log(error);
})
.finally(()=>{console.log('finally')});
次です.catchから出てきたものをチェーンと言います...結局同じ約束をするから登録catch
finally:成功しても失敗しても、最後に呼び出さなければなりません.
2秒後、コンソールウィンドウからEllieが出力されます.
resolveというコールバック関数で渡された値がvalueのパラメータに渡され、値が出力されます.
resultコールバック関数を実行すると、エラーウィンドウが表示されます.=>catch関数を使用すると、エラーが発生した場合の処理方法を登録できます.
エラーウィンドウはcatch関数で表示されなくなり、Error:no Networkとして出力されます.
3. Promise chaining
const fetchNumber = new Promise((resolve, reject)=>{
setTimeout(()=> resolve(1), 1000);
});
fetchNumber
.then(num => num*2)
.then(num => num*3)
.then(num => {
return new Promise((resolve, result)=>{
setTimeout(()=> resolve(num-1), 1000);
})
})
.then(num => console.log(num));
そしてあなたは直接あなたの価値を伝えることができて、あなたの約束を伝えることができます.
4.Error Handling
const getHen = () =>
new Promise((resolve, reject)=>{
setTimeout(()=> resolve('🐓'), 1000);
});
const getEgg = hen =>
new Promise((resolve, reject)=>{
setTimeout(()=> reject(new Error(`error! ${hen}=> 🥚`)), 1000);
})
const cook = egg =>
new Promise((resolve, reject)=> {
setTimeout(()=> resolve(`${egg} => 🍳`), 1000);
})
getHen() //
.then(getEgg)//.then(hen => getEgg(hen)) 콜백함수를 전달할 때 받아오는 벨류를
//다른 함수로 호출하는 경우 간단히 코드 작성가능. 자동적으로 getEgg라는
//함수에 전달해서
.catch(error => {
return '🥖';
})
.then(cook)//.then(egg => cook(egg))
.then(console.log)//.then(meal => console.log(meal))
.catch(console.log)
🥖 エラーは出力されません.🥖 => 🍳 に出力します.
承諾チェーンは失敗しません
Reference
この問題について([JS] promise), 我々は、より多くの情報をここで見つけました
https://velog.io/@hoje15v/드림코딩-자바스크립트11-promise
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
const promise = new Promise((resolve, reject)=>{
//doing some heavy work(network, read files)
console.log('doing something...')
setTimeout(()=>{
//resolve('ellie')
reject(new Error('no network'));
}, 2000);
});
promise//
.then(value =>{
console.log(value);
})
.catch(error =>{
console.log(error);
})
.finally(()=>{console.log('finally')});
const fetchNumber = new Promise((resolve, reject)=>{
setTimeout(()=> resolve(1), 1000);
});
fetchNumber
.then(num => num*2)
.then(num => num*3)
.then(num => {
return new Promise((resolve, result)=>{
setTimeout(()=> resolve(num-1), 1000);
})
})
.then(num => console.log(num));
const getHen = () =>
new Promise((resolve, reject)=>{
setTimeout(()=> resolve('🐓'), 1000);
});
const getEgg = hen =>
new Promise((resolve, reject)=>{
setTimeout(()=> reject(new Error(`error! ${hen}=> 🥚`)), 1000);
})
const cook = egg =>
new Promise((resolve, reject)=> {
setTimeout(()=> resolve(`${egg} => 🍳`), 1000);
})
getHen() //
.then(getEgg)//.then(hen => getEgg(hen)) 콜백함수를 전달할 때 받아오는 벨류를
//다른 함수로 호출하는 경우 간단히 코드 작성가능. 자동적으로 getEgg라는
//함수에 전달해서
.catch(error => {
return '🥖';
})
.then(cook)//.then(egg => cook(egg))
.then(console.log)//.then(meal => console.log(meal))
.catch(console.log)
Reference
この問題について([JS] promise), 我々は、より多くの情報をここで見つけました https://velog.io/@hoje15v/드림코딩-자바스크립트11-promiseテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol