vue3中，调接口，渲染数据

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. 调接口/发送请求

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

 

3. 渲染页面

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

 状态码

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

接口文档：apifox-API文档