cursor-处理请求异步问题（2）

代码部分：

// 控仅进入页面或者切换站点时调用fetchDataAndInitGraph方法一次
let areaOnlyOnce = true

watch(() => [station.value, areaDateType.value, areaDate.value], async (val) => {
  await handleAreaSearch()

  if (areaOnlyOnce) {
    // 取区域能耗排名前五的id集合，调用fetchDataAndInitGraph方法
    curAreaIds.value = areaEnergySortData.value.slice(0, 5).map(item => item.id)
    fetchDataAndInitGraph(curAreaIds.value, areaDateType.value, areaDate.value, 6, initAreaGraph)
    areaOnlyOnce = false
  }
})

分析：

        这次主要是来分析这段代码。

        这是vue3中的一个简单的实现监听的功能，station.value, areaDateType.value, areaDate.value其中任意变量变化都会重新执行watch中的代码。

        业务前提声明：

        （1）handleAreaSearch（）和fetchDataAndInitGraph（）两个方法都是去请求拿数据的，但是后者要基于前者的响应结果然后再去请求，是有先后顺序的。

        （2）另外就是fetchDataAndInitGraph（）业务上要求只执行一次。

        所以，实现这两个功能，分别是两件事