代码之家 › 专栏 › 技术社区 › Hemanth Girimath

如何多个2个异步函数值角度

typescript angular javascript

Hemanth Girimath · 技术社区 · 2 年前

我的服务中有异步函数,返回如下。

问题

最好的方法是什么( 合同地址*显示值 )对于每个数组项?并能在页面上显示返回值。

将异步数据存储到可观察对象、能够订阅异步数据并进一步使用数据的最佳方式是什么?此处是否建议使用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
}

访问时,我得到如下结果

这硬币getSanityTokens()。然后(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)

这硬币getTokens()。然后(res=>console.log(“这是第三个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)

0 回复 | 直到 2 年前

0xBobby 2 年前

将两者的结果结合起来 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$ 。之后请记住取消订阅或使用异步管道。