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