関数の戻り値を変数に代入する

Question

私はある種の質問を受けましたが、hereと同じ質問があります。

私は機能を作った：

const rewardStayingViewersOrNewcomers =() => { 
    fetch('https://tmi.twitch.tv/group/user/instak/chatters') 
    .then(parseJSON) 
    .then(r => { 
    let chatters = r.chatters; 
    viewerKeys = Object.keys(chatters); // [mods, viewers,...] 
    let ChattersPerRole = viewerKeys.map(role => { 
     return chatters[role].map(username => ({ 
     username, role 
     })); 
    }); 
    return flattenDeep(ChattersPerRole); 
    }).catch(err => { 
    console.log(`Error in fetch: ${err}`); 
    }); 
}; 

はなぜ変数にその戻り値を割り当てることはできませんか？ viewersPerRoleは私が原因のフェッチを待っているデータで充填するために未定義その変数が返すのログ...

let viewersPerRole = rewardStayingViewersOrNewcomers(); 
setTimeout(() => console.log(viewersPerRole), 7000); 

ボーナス質問、どのように私は簡単に待つことができますか？ （私はsetTimeout（）を使用する必要はありません）？

Answer 1

まず、main関数から何かを返すようにしてください。フェッチ（...）の前にはリターンがありません。コードは次のようになります。あなたはステージ3を有効にしてtranspileするBabeljsを使用している場合

const rewardStayingViewersOrNewcomers =() => { 
    return fetch('https://tmi.twitch.tv/group/user/instak/chatters') 
    .then(parseJSON) 
    .then(r => { 
    let chatters = r.chatters; 
    viewerKeys = Object.keys(chatters); // [mods, viewers,...] 
    let ChattersPerRole = viewerKeys.map(role => { 
     return chatters[role].map(username => ({ 
     username, role 
     })); 
    }); 
    return Promise.resolve(flattenDeep(ChattersPerRole)); 
    }).catch(err => { 
    console.log(`Error in fetch: ${err}`); 
    }); 
}; 

// now that you're returning a promise 
rewardStayingViewersOrNewcomers() 
    .then(viewersPerRole => console.log(viewersPerRole)) 

、非同期で見て/待っています。