Tengo funciones asíncronas en mis servicios que regresan de la siguiente manera.
Preguntas
¿Cuál es la mejor manera de hacer ( contractAddress*displayValue ) para cada elemento de la matriz? y ser capaz de mostrar el valor devuelto en la página.
¿Cuál es la mejor manera de almacenar datos asincrónicos en un observable, poder suscribirse a él y utilizar más los datos? ¿Se recomienda NGRX aquí para administrar el estado?
async getSanityTokens() { const coins = await fetch("https://i7ml51e6.api.sanity.io/v2021-10-21/data/query/production?query=*%5B_type%3D%3D'coins'%5D%7B%0A%20%20ContractAddress%2C%0A%20%20name%2C%0A%20%20usdPrice%0A%7D") const data = await coins.json(); const address = data.result; return address } async getThirdWebTokens(contractAddress) { const sdk = new ThirdwebSDK( new ethers.Wallet( environment.metamask_Key, ethers.getDefaultProvider('https://rinkeby.infura.io/v3/94ef7ea56a0e4585834ffbb4dfb3f8b8')) ) const token = sdk.getToken(contractAddress); const tokens = await token.balanceOf("0x47444Bfc280Bd50e3a96ccFd031f7539d6B6E97A") return tokens } async getTokens() { const coins = await this.getSanityTokens(); const promises = coins.map(coin=>this.getThirdWebTokens(coin.ContractAddress)); const tokenArray = await Promise.all(promises); return tokenArray }Cuando accedo obtengo el resultado de la siguiente manera
this.coin.getSanityTokens().then(res=>console.log("Estos son datos de cordura",res));
this is sanity data (3) [{…}, {…}, {…}] 0: {ContractAddress: '0xBbCd8c1b5993062F2761CF07e27C2adebc55766F', name: 'Ethereum', usdPrice: '2088'} 1: {ContractAddress: '0xb74FbCF3b2e6b29B0b86f005FCC80eC649de7E30', name: 'Bitcon', usdPrice: '30947'} 2: {ContractAddress: '0x7a6DC36DD8CC525E15C2B14a415253153909fc24', name: 'Solana', usdPrice: '52'} length: 3 [[Prototype]]: Array(0)this.coin.getTokens().then(res=>console.log("Estos son los datos de la tercera web",res));
this is thirdweb data (3) [{…}, {…}, {…}] 0: {name: 'Ethereum', symbol: 'ETH', decimals: 18, value: BigNumber, displayValue: '8.0'} 1: {name: 'Bitcoin', symbol: 'BTC', decimals: 18, value: BigNumber, displayValue: '5.0'} 2: {name: 'Solana', symbol: 'SOL', decimals: 18, value: BigNumber, displayValue: '12.0'} length: 3 [[Prototype]]: Array(0)getThirdWebTokens y getSanityTokens Entonces, cambie getTokens de esta manera: async getTokens() { const coins = await this.getSanityTokens(); const promises = coins.map(coin => { const tokenValues = this.getThirdWebTokens(coin.ContractAddress); return {...coin, ...tokenValues, usdTotal: (+coin.usdPrice) * (+tokenValues.displayValue) }); const tokenArray = await Promise.all(promises); return tokenArray }inRoot que almacena los datos necesarios. Algo como: @Injectable({ providedIn: 'root' }) export class StateService { private stateSubject = new BehaviorSubject<SomeModel>({}); state$ = this.stateSubject.asObservable(); get currentState(): SomeModel { return this.stateSubject.value; } setState(state: Partial<SomeModel>) { const oldValue = this.stateSubject.value; this.stateSubject.next(...oldValue, ...{state || {}}); } luego, cuando necesite leerlo desde algún lugar, simplemente suscríbase a this.stateService.state$ . Y recuerde cancelar la suscripción o usar la tubería asíncrona después.