Best practice for multiple dependent requests in Web3.js

Question

Looking to get some advice on a pretty common scenario using Web3.js

Let's say you want to calculate the number of tokens for a specific ERC20 token contract that are present at an Ethereum Address.

To do this accurately, you will need to fetch both the balanceOf() and the decimals() values through Web3.js, and then adjust the balance to give a final value.

However, best practice for these Web3 requests is to make sure they are asynchronous, so we may get back the balance at a different time we get back the decimals.

What is the best way to display the adjusted value after both of these values are returned?

From my brief research, you can:

• Use JavaScript Promises
• Use Web3.js Batch
• Nest the Asynchronous Calls

Are there any other options? Is there a best choice from the options above? Or is it scenario driven?

Answer 1

As you mentioned, I think the choice is scenario-based. Specifically, how complex your requests are and how many asynchronous calls you need to make.

Other things to consider are (1) your familiarity with the alternatives, (2) what you're using for asynchronous calls in the rest of your code base - good to have consistency, and (3) your team's familiarity with the method.

I'll throw another one in there that you didn't include on your list:

• ES8 async/await (although I'd stay this more stylistic: simpler, more concise way of coding promises/chains)

In your example, where there are only two variables you're retrieving, this is pretty simple so you're probably fine using callback / nesting your asynchronous calls. However, the more variables or asynchronous requests you have, this will start getting messy pretty quickly ("callback hell"), not to mention it may take longer to resolve your full chain since each sequential call waits until the previous call resolves until initiating.

So once you have more asynchronous calls, you can benefit from promises due to (1) cleaner syntax, and (2) concurrency by using Promise.all.

Answer 2

Thank you carlolm for the help. After a bit more research, it felt like promises was the right thing to do here, and the method that will be adopted by web3.js in the future by default. To solve my problem today, this is what I ended up doing:

I found this comment which suggested a simple wrapper that I could add to my project and wrap my Web3.js functions with:

const promisify = (inner) =>
    new Promise((resolve, reject) =>
        inner((err, res) => {
            if (err) {
                reject(err)
            } else {
                resolve(res);
            }
        })
    );

The author of the comment then mentions to use await to assign the variable, but this did not work for me. Instead I created a set of Promise functions using the wrapper, and had them all trigger a Promise.all.

So for my specific example in my post this is what I did:

tokenContract = web3.eth.contract(contractABI).at(contractAddress)

var dec = promisify(cb => tokenContract.decimals(cb))
var bal = promisify(cb => tokenContract.balanceOf(address, cb))
var tokName = promisify(cb => tokenContract.name(cb))
var tokSym = promisify(cb => tokenContract.symbol(cb))

Promise.all([dec, bal, tokName, tokSym]).then(function ([decimal, balance, tokenName, tokenSymbol]) {
    var adjustedBalance = balance / Math.pow(10, decimal)
    var output = adjustedBalance + " " + tokenSymbol + " (" + tokenName + ")";
    console.log(output)
})

Output would look like:

64.09856462716048 OMG (OMGToken)

I hope this helps someone else too!

EDIT: After making the outer function asynchronous, I was able to make the await stuff work:

async function getERC20Balance() {
    var address, contractABI, contractAddress, tokenContract, balance, decimals, tokenName, tokenSymbol, adjustedBalance
    address = document.getElementById("address").value
    contractAddress = document.getElementById("contractAddress").value
    contractABI = human_standard_token_abi

    tokenContract = web3.eth.contract(contractABI).at(contractAddress)

    decimals = promisify(cb => tokenContract.decimals(cb))
    balance = promisify(cb => tokenContract.balanceOf(address, cb))
    tokenName = promisify(cb => tokenContract.name(cb))
    tokenSymbol = promisify(cb => tokenContract.symbol(cb))

    adjustedBalance = await balance / Math.pow(10, await decimals)

    document.getElementById("tokenBalance").innerHTML = adjustedBalance;
    document.getElementById("tokenInfo").innerHTML = " " + await tokenSymbol + " (" + await tokenName + ")";
}