如何将Promise.all获取的多币种值存入指定数组并支持动态扩展？

1. 重构响应式数据结构 #

把原来分散的单个币种响应式变量，改成两个核心数组：一个管理需要监控的币种列表，另一个存储币种名称与对应汇率的映射数据。

Vue3 示例 #

import { ref, watchEffect } from 'vue';

// 可动态修改的币种列表，后续直接往这里加新币种即可
const currencyList = ref(['ETH', 'BTC', 'USD', 'EUR', 'UAH']);
// 存储币种-汇率的数组，每个元素是包含name和rate的对象
const currencyRates = ref([]);

Vue2 示例 #

export default {
  data() {
    return {
      currencyList: ['ETH', 'BTC', 'USD', 'EUR', 'UAH'],
      currencyRates: []
    };
  }
};

2. 封装批量获取汇率的逻辑 #

写一个通用函数，接收币种列表，批量调用getValue并返回包含币种名称和汇率的结果数组：

async function fetchCurrencyRates(currencies) {
  // 为每个币种生成请求Promise，同时关联币种名称
  const requestPromises = currencies.map(currency => 
    getValue(currency)
      .then(rate => ({ name: currency, rate }))
      // 可选：处理请求失败的情况
      .catch(err => ({ name: currency, rate: null, error: err.message }))
  );
  
  return Promise.all(requestPromises);
}

3. 实现自动监听与更新 #

通过监听币种列表的变化，自动触发汇率获取逻辑，初始化时也会执行一次。

Vue3 示例 #

// 监听币种列表变化，自动拉取最新汇率
watchEffect(async () => {
  if (currencyList.value.length === 0) return;
  
  const rates = await fetchCurrencyRates(currencyList.value);
  currencyRates.value = rates;
});

Vue2 示例 #

export default {
  // ... 省略data和methods
  watch: {
    currencyList: {
      async handler(newCurrencyList) {
        if (!newCurrencyList.length) return;
        this.currencyRates = await this.fetchCurrencyRates(newCurrencyList);
      },
      immediate: true // 页面初始化时自动执行一次
    }
  }
};

4. 动态添加币种 #

直接往currencyList里新增币种，就会自动触发汇率获取：

// Vue3
currencyList.value.push('CNY');

// Vue2
this.currencyList.push('CNY');

5. 模板中渲染数据 #

遍历currencyRates即可展示所有币种的汇率：

<template>
  <div class="currency-item" v-for="item in currencyRates" :key="item.name">
    <span>{{ item.name }}</span>
    <span v-if="item.rate">{{ item.rate }}</span>
    <span v-else class="error">{{ item.error || '获取失败' }}</span>
  </div>
</template>

可选优化 #

• 可以给重复请求加缓存，避免相同币种短时间内重复调用getValue
• 可以对currencyRates做去重处理，防止同一币种多次出现

内容的提问来源于stack exchange，提问作者Oleksii