如何多個2個異步函式值Angular-有解無憂

我的服務中有異步函式，回傳如下。

問題

對于每個陣列項，最好的方法是什么（contractAddress*displayValue ）？并能夠在頁面上顯示回傳值。

將異步資料存盤到可觀察物件、能夠訂閱它并進一步使用資料的最佳方法是什么，這里推薦 NGRX 來管理狀態嗎？

async getSanityTokens() {
     const coins = await fetch("https://i7ml51e6.api.sanity.io/v2021-10-21/data/query/production?query=*[_type=='coins']{
  ContractAddress,
  name,
  usdPrice
}")
 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("這是第三個網路資料",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)

uj5u.com熱心網友回復：

將兩者的結果結合起來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$. 并記住取消訂閱或之后使用異步管道。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/481483.html

標籤：javascript 有角度的打字稿

上一篇：使用正則運算式將字串文本替換為html標記

下一篇：顯示輸入欄位的功能組件