vue3中,调接口,渲染数据

1. 封装接口文档

javascript 复制代码
// 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. 调接口/发送请求

javascript 复制代码
<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. 渲染页面

javascript 复制代码
<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>

知识点:接口类型/HTTP请求方法

状态码

参考:HTTP 请求方法 | 菜鸟教程 (runoob.com)

接口文档:apifox-API文档

相关推荐
blammmp5 分钟前
Java:数据结构-枚举
java·开发语言·数据结构
bysking14 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
何曾参静谧17 分钟前
「C/C++」C/C++ 指针篇 之 指针运算
c语言·开发语言·c++
暗黑起源喵23 分钟前
设计模式-工厂设计模式
java·开发语言·设计模式
WaaTong28 分钟前
Java反射
java·开发语言·反射
Troc_wangpeng29 分钟前
R language 关于二维平面直角坐标系的制作
开发语言·机器学习
王哲晓30 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
努力的家伙是不讨厌的31 分钟前
解析json导出csv或者直接入库
开发语言·python·json
fg_41133 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v34 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试