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文档

相关推荐
Sinsa_SI2 分钟前
2024年9月中国电子学会青少年软件编程(Python)等级考试试卷(六级)答案 + 解析
开发语言·python·等级考试·电子学会·考级
济南信息学奥赛刘老师2 分钟前
GESP考试大纲
开发语言·c++·算法·青少年编程
是萝卜干呀4 分钟前
Frontend - 防止多次请求,避免重复请求
javascript·ajax·jquery·防抖·节流·disabled属性
三金1213811 分钟前
局部使用Vue
前端·javascript·vue.js
LinXunFeng17 分钟前
Flutter - 子部件任意位置观察滚动数据
前端·flutter·开源
许静知17 分钟前
第十章 JavaScript的应用
开发语言·javascript·ecmascript
froginwe1124 分钟前
SQLite Having 子句
开发语言
好开心3332 分钟前
js高级06-ajax封装和跨域
开发语言·前端·javascript·ajax·okhttp·ecmascript·交互
小镇程序员36 分钟前
vue2 src_Todolist消息订阅版本
前端·javascript·vue.js
不惑_38 分钟前
【Python入门第七讲】列表(List)
开发语言·python·list