Web3.js: Wie kann man eine Menge von Elementen aus der Blockchain effizient laden und anzeigen?

Ich entwickle eine DApp und kämpfe mit dem effizienten Laden aus der Blockchain und der Anzeige im Frontend. Ich lade alle Artikel auf einmal. Wenn die Liste der Elemente sehr groß wird (> 500), beginnt das Frontend zu verzögern und das Laden ist etwas langsam (ich erhalte Warnungen wie „[Violation] Forced reflow while running JavaScript takes 87ms“). Die Seite hat eine Paginierung und Sortierer/Filter, daher kann ich Elemente nicht teilweise (nach Index) laden, da ich nicht weiß, wie viele davon ich brauche, wenn Filter/Sortierer angewendet werden.

Hier ist der Pseudocode: Solidity:

struct Item {
  uint256 id;
  address owner;
  bool claimed;
}

Item[] private items;
uint256 public numberOfItems;

function getItemInfo(uint256 itemID) public view returns(address owner, bool claimed) {
  Item memory item = items[itemID];

  owner = item.owner;
  claimed = item.claimed;
}

JS (web3):

loadItems: function(items, account) {
  var contractInstance;

  App.contracts.MyContract.deployed().then(function(instance) {
    contractInstance = instance;
    return contractInstance.numberOfItems.call();
}).then(function(numberOfItems) {
  console.log(Number(numberOfItems));

  for (var i = 0; i < numberOfItems; i++ ){
  contractInstance.getItemInfo(i).then(function(data){
    //console.log(data);
  })
}
}).catch(function(err) {
  console.log(err.message);
});
},

Es wäre großartig, Vorschläge zu erhalten, wie ich dieses Problem lösen und Artikel effizient laden kann.

Antworten (1)

Um sicherzustellen, dass die Dinge geladen werden, müssen Sie Versprechungen verwenden. Dadurch wird sichergestellt, dass nichts gebohrt wird, weil die Zeit abgelaufen ist. Es gibt einige Strategien, hier ein Beispiel:

function TotalOwnersPromise(Contract) {
return new Promise((resolve, reject) => {

     Contract.TotalOwners(function (error, result) {
        if (error) {
            reject(error);
            console.log("Total Owners Error");
        } else {

            resolve(result);
            console.log("Owners " + Owners);
        }
         });
     });
};

Was die große Menge an Anfragen betrifft, die Sie stellen, müssen Sie Ihren eigenen Knoten ausführen und einige node.js haben, die Ereignisse und Verträge überwachen. Es gibt keine Garantie dafür, dass Infura oder Etherscan in Zukunft so viele Anfragen zulassen werden, sie kostenlos zu hämmern.