uniapp 封装调用api并循环输出数据

以下是一个简单的Uniapp封装调用API并循环输出数据的示例：

1. 首先，创建一个名为`api.js`的文件，并在其中封装一个调用API的函数`getData`：

import request from '@/utils/request'

export function getData() {
  return request({
    url: '/api/data',
    method: 'get'
  })
}

2. 在需要使用该API的页面中，引入`api.js`并调用`getData`函数：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { getData } from '@/api/api'

export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    async getDataList() {
      const res = await getData()
      this.dataList = res.data
    }
  }
}
</script>

3. 在页面中循环输出数据，这里使用了`v-for`指令来循环输出数据列表中的每一项。注意要给每一项设置一个唯一的`key`属性。

以上示例中，使用了`async/await`来异步调用API并获取数据，确保页面在数据加载完成后再进行渲染。另外，在`api.js`中使用了封装好的`request`函数来发送请求，增强了代码的可读性和复用性。