在uniapp里如何调用接口？

基本的数据流模式：

接口调用 → 获取数据 → 存入data → 模板渲染

1. 定义数据结构

data() {
  return {
    // 方式1：定义空对象（适合单条数据）
    detailData: {},
    
    // 方式2：定义空数组（适合列表数据）
    listData: [],
    
    // 方式3：定义复杂对象（适合多维度数据）
    statisticsData: {
      months: [],
      times: [],
      quantities: [],
      costs: []
    },
    
    // 方式4：直接定义图表数据格式
    chartData: {
      categories: [],
      series: []
    }
  }
}

2. 调用接口并赋值

methods: {
  // 获取详情数据（对象）
  async fetchDetail() {
    const res = await this.$u.api.getDetail({
      id: this.orderId
    })
    if (res.code == 200) {
      // 直接赋值给对象
      this.detailData = res.data
      // 或者合并到现有对象
      // this.detailData = { ...this.detailData, ...res.data }
    }
  },
  
  // 获取列表数据（数组）
  async fetchList() {
    const res = await this.$u.api.getList({
      page: this.page,
      size: 10
    })
    if (res.code == 200) {
      // 直接赋值给数组
      this.listData = res.data
      // 或者追加到数组
      // this.listData = [...this.listData, ...res.data]
    }
  },
  
  // 获取统计数据（多维度）
  async fetchStatistics() {
    const res = await this.$u.api.getStatistics({
      beginTime: '2023-01-01',
      endTime: '2023-06-30'
    })
    if (res.code == 200) {
      // 处理数据后再赋值
      this.statisticsData = {
        months: res.data.map(item => item.month),
        times: res.data.map(item => item.chargingTimes),
        quantities: res.data.map(item => item.chargingQuantity),
        costs: res.data.map(item => item.totalCost)
      }
      
      // 如果是图表数据，按图表格式组装
      this.chartData = {
        categories: res.data.map(item => item.month),
        series: [
          {
            name: "充电次数",
            data: res.data.map(item => item.chargingTimes)
          },
          {
            name: "充电量",
            data: res.data.map(item => item.chargingQuantity)
          },
          {
            name: "花费",
            data: res.data.map(item => item.totalCost)
          }
        ]
      }
    }
  }
}

3. 在模板中渲染

<template>
  <view>
    <!-- 1. 渲染对象数据 -->
    <view class="detail-card" v-if="detailData && Object.keys(detailData).length">
      <view>订单编号：{{detailData.chargingOrdersNo}}</view>
      <view>充电量：{{detailData.chargedQuantity}}度</view>
      <view>花费：{{detailData.paymentAmount}}元</view>
    </view>
    <view v-else class="empty">暂无数据</view>
    
    <!-- 2. 渲染数组数据 -->
    <view class="list">
      <view v-for="item in listData" :key="item.id" class="list-item">
        <view>订单编号：{{item.chargingOrdersNo}}</view>
        <view>充电量：{{item.chargedQuantity}}度</view>
      </view>
      <view v-if="listData.length === 0" class="empty">暂无数据</view>
    </view>
    
    <!-- 3. 渲染统计数据 -->
    <view class="statistics" v-if="statisticsData.months.length">
      <view v-for="(month, index) in statisticsData.months" :key="month">
        <view>{{month}} - 充电次数: {{statisticsData.times[index]}}</view>
      </view>
    </view>
    
    <!-- 4. 渲染图表数据 -->
    <view class="chart-box" v-if="chartData.categories.length">
      <qiun-data-charts 
        type="column"
        :chartData="chartData"
      />
    </view>
    <view v-else class="empty">暂无图表数据</view>
  </view>
</template>