JavaScript Promiseを使用して汚れたコードを修正する

この文章.
YouTube DREAMコードチャンネルの
JavaScript 12。JavaScript Promise|フロントエンド開発者入門(JavaScript ES 6)
ビデオを見ながら書いた文章です.
Promiseを用いてコールバック関数の多いコードをクリーンアップします.
次の例は、adminのコードであるかどうかを確認するためにuserのidおよびpasswordを受信することである.△読みやすさが悪い.

1.汚れたコード

class UserStorage {
    loginUser(id, password, onSuccess, onError){
        setTimeout(() => {
            if(
                (id === 'HM' && password === 'KM123') ||
                (id === 'KM' && password === 'KM321')
            ) {
                onSuccess(id);
            }
            else {
                onError(new Error('id & pwd not found'));
            } 

        }, 1000);
    }

    getRoles(user, onSucces, onError){
        setTimeout(() =>{
            if(user == 'HM'){
                onSucces({name:'HM', role:'admin'});
            } 
            else {
                onError(new Error('no access'));
            }
        } , 1000);
    }
}


//1. id와 pwd를 받는다.
//2. 로그인한다.
//3. 역할을 가져온다.
//4. 역할을 확인한다.
const user_storage = new UserStorage();
const id = prompt('Your ID? ');
const pwd = prompt('Your pwd? ');

user_storage.loginUser(id, pwd, 
    (user) => {
        user_storage.getRoles(
        user, 
        (user_role) => {
            alert(`welcome! ${user_role.name}~ you are ${user_role.role}`);
        }, 
        (error) => {
            console.log(error);
            console.log('you are not admin');
        });
    },
    (error) => console.log(error)
    
); 

2.コールバック関数をPromiseオブジェクトに置き換える

まずUserStorageクラスの関数を変更します.
loginUserのcallback関数パラメータを削除し、Promiseオブジェクトを返す形式にします.
getRolesもPromiseオブジェクトを使用してcallbackパラメータを除去します.
onSuccessとonErrorの代わりにPromiseの決意と拒否をそれぞれ用いた.

class UserStorage {
    loginUser(id, password){
        return new Promise((resolve, reject)=>{
            setTimeout(() => {
                if(
                    (id === 'HM' && password === 'HM123') ||
                    (id === 'PM' && password === 'PM321')
                ) {
                    resolve(id);
                }
                else {
                    reject(new Error('id & pwd not found'));
                } 
    
            }, 1000);
        });
        
    }

    getRoles(user){
        return new Promise((resolve, reject) => {
            setTimeout(() =>{
                if(user == 'HM'){
                    resolve({name:'HM', role:'admin'});
                } 
                else {
                    reject(new Error('no access'));
                }
            } , 1000);
        });
        
    }
}

3.次にcatchを使用

thehメソッドとcatchメソッドを使用してuser入力値が渡された動作を処理します.

const user_storage = new UserStorage();
const id = prompt('Your ID? ');
const pwd = prompt('Your pwd? ');


user_storage.loginUser(id, pwd)
    .then((user)=>user_storage.getRoles(user))
    .then((user_role)=>{
        alert(`welcome! ${user_role.name}~ you are ${user_role.role}`);
    })
    .catch((error)=>console.log(error));

loginUser()メソッドとgetRoles()メソッドは、Promiseオブジェクトを返しますので、リンクできます.

4.運転結果

上の2、3つのコードを合わせて実行すると
次のように浮かび上がる.

IDはHM、

pwdにHM 123を入力
次のウィンドウが表示されます.

その他の場合、ブラウザコンソールウィンドウにエラー文が表示されます.