封装axios请求

 下载好axios后导入即可，注意这里实现响应式数据，需要更改images的值，vue3中的setup()和reactive不是很懂，之后的帖子再细细研究

<template>
  <div id="swiperTop">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in state.images" :key="image">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import axios from 'axios'
// 响应式
import { reactive, onMounted } from 'vue'
export default {
  // 由于setup 是在beforeCreate 和 create 生命周期阶段，组件还没有创建，即还没有进入 data 方法 阶段。
  setup () {
    // reactive 是 Vue3 中提供的实现响应式数据的方法
    const state = reactive({
      images: [
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      ]
    });
    // 组件挂载完成后执行。此时DOM节点已创建完成。通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码
    onMounted(() => {
      axios.get(' http://localhost:3000/banner?type=2').then((res) => {
        console.log(res);
        state.images = res.data.banners;
        console.log(state.images);

      })
    })
    return { state };
  },
};