vue3 axios 如何将接口的结果赋值到数组内容

在 Vue3 中使用 Axios 发送请求并将接口返回的数据赋值给数组的内容，你可以按照以下步骤操作：

1. 首先，在你的组件中引入 Axios，通常我们会通过 `import` 导入它：

import axios from 'axios';

2. 定义一个数据属性来存储你的数组：

<template>
  <div>
    <ul ref="itemList">
      <!-- 数组元素将会在这里渲染 -->
    </ul>
  </div>
</template>

<script setup>
const axios = inject('axios'); // 如果你在组件内注入 Axios，可以使用这种方法
let items = []; // 初始化一个空数组
</script>

3. 使用 Axios 的 `get` 或者其他合适的方法发送请求，并在响应拦截器中处理数据：

const fetchData = async () => {
  try {
    const response = await axios.get('your-api-url');
    items = response.data; // 将接口返回的数据赋值给数组items
    // 更新视图
    this.$nextTick(() => {
      this.$refs.itemList.innerHTML = ''; // 清空列表
      response.data.forEach((item) => { // 遍历新数据并添加到列表中
        this.$refs.itemList.append(
          `<li>${item.title}</li>` // 这里假设你的数据结构包含一个'title'字段
        );
      });
    });
  } catch (error) {
    console.error(error);
  }
};

4. 调用 `fetchData` 函数来获取数据：

onMounted(() => {
  fetchData();
});

5. 如果需要在某个事件触发后更新数据，也可以在相应的函数中调用 `fetchData`。