vue3中，调接口，渲染数据

news2025/1/23 7:19:58

1. 封装接口文档

// src/apis/xxx.js中
// 1. 导入 封装的axios实例
import request from '@/utils/http'    

// 2. 封装接口 --获取轮播图数据
export const getBannerAPI = (params = {})=>{

    // 传默认参数->（传参 = 默认参数）
    const { distributionSite = '1' } = params

    return request({
        url:'/home/banner',
        method: 'GET',        //get请求可以默认不写
        params:{              //传参，GET请求：query参数->params； POST请求：Body参数->data
            distributionSite
        }
    })
}

2. 调接口/发送请求

<script setup>            // vue3中的setup组合式API（语法糖）
import { getBannerAPI } from '@/apis/home'    //1. 按需导入 接口
import { ref, onMounted } from 'vue'

const bannerList = ref([])            // 2. 定义一个响应式数据 来接收

const getBanner = async ()=>{         // 3. 使用es7中的async await异步方法调用接口
    const res = await getBannerAPI()
    bannerList.value = res.result     // 5. 接口成功发起后，将数据传给响应式数据
}

onMounted(() => getBanner())            // 4.调用钩子，发送请求 
</script>

发送完请求，可以使用Google浏览器查看接口发送情况（Network -> Fetch/XHR）

3. 渲染页面

<template>
    <div class="home-banner">
        <el-carousel height="500px">
            <!-- 调用 bannerList响应式数据 来渲染页面 -->
            <el-carousel-item v-for="item in bannerList" :key="item.id">
                <img :src="item.imgUrl" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>