[JS] promise


出典:YouTube DREAMコードJavaScript

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)
🥖 エラーは出力されません.🥖 => 🍳 に出力します.
承諾チェーンは失敗しません