如何多个 2 个异步函数值 Angular

Question

我的服务中有异步函数，return 如下。

问题

对每个数组项执行 (contractAddress*displayValue) 的最佳方法是什么？并能够在页面上显示 returned 值。

将异步数据存储到可观察对象、能够订阅它并进一步使用数据的最佳方式是什么，这里是否推荐使用 NGRX 来管理状态？

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
}

访问后得到如下结果

this.coin.getSanityTokens().then(res=>console.log("这是理智数据",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("this is thirdweb data",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)

Answer 1

合并 getThirdWebTokens 和 getSanityTokens 的结果所以里面改变 getTokens 像这样：

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
}

在大多数情况下，如果您有一个基本的应用程序，NGRX 可能会增加一些不必要的开销。您可以简单地声明一个状态服务，而不是添加它，可以提供 inRoot 来存储必要的数据。类似于：

@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 || {}});
    }

然后当您需要从某个地方阅读它时，只需订阅 this.stateService.state$。并记得取消订阅或之后使用异步管道。

如何多个 2 个异步函数值 Angular

How to multiple 2 async function values Angular

javascript

angular

typescript