web3를 Promise로 호출

React와 truffle로 dApp을 개발중이다. 

- 백엔드는 sprintBoot로 할 예정인데 모두 합해서 RST 개발환경으로 부르고 있다.
 (R: react-frontend ,  S: springboot-backend,   T: truffle )

dApp개발과 직접상관있는 부분은

  - R: dApp개발, 

  - T: solidity개발이다. (S: springboot-backend는 일단은 배포와 상관이 있다고 보면된다)

(UI와 web3가 섞이면서 콜백지옥에 빠질 수 있으므로,

RST개발환경과 같은 방식을 사용해 ES6 javascript를 사용해 이를 빠져나오길 추천한다.)

UI에서 promise를 활용해  web3.eth.getAccounts, 그 중에서도 accounts[0] 즉, 자기 account를 

가져오는 샘플코드는 다음과 같다.

<UI에서 호출하는 부분>

componentDidMount() {
    console.log('componentDidMount start');
    //getMyAccount
    this.ATZToken.getMyAccount().then((account) => {
        this.myAccountInput.value = account;
        console.log('in componentDidMount:' + account);
    }).catch((err) => {
        console.log(err.message);
    });
    console.log('componentDidMount End');
}

<web3 연동 부분>  es6-promisify로는 잘안되는 부분이 있었는데, REF 를 보고 자체 promisify함수를 만들어 해결하였다. 

//web3함수를 Promise로 만들기 위한 공통모듈
const promisify = (inner) =>
    new Promise((resolve, reject) =>
        inner((err, res) => {
            if (err) { reject(err) }
            resolve(res);
        })
    );

 

/* Basic함수들 - eth의 sync함수는 값을 못 읽어 오는 경우가 발생가능하므로 async함수를 써야 함. */
getMyAccount = async () => {
    const accounts = await promisify(cb => this.web3.eth.getAccounts(cb));
    return accounts[0];  //accounts Array의 0번째가 본인 account임.
}