banner这个文件是怎么请求到后端数据的
目录
banner这个文件是怎么请求到后端数据的
我先全局查找哪里引用了这个 Banner 组件,以及查看同目录下的 mixin.js 和 components/page/index.vue,以确定数据是从父组件传入还是在组件内请求的。随后我会打开疑似相关的 API 文件(例如 api/page.js)确认首页/装修数据的请求来源。
[5 tools called]
我先打开首页 pages/index/index.vue 看它如何给 Banner 传 dataList,并确认首页在哪儿发起接口请求。随后我会打开请求定义 api/page.js 以给出完整链路。
[1 tool called]
简短回答
components/page/banner/index.vue 本身不请求后端数据,它通过 props 接收父组件传入的 dataList。首页 pages/index/index.vue 调用 api/page.js 的 home() 接口拿到后端返回的 banner 数据,再以 :dataList="banner" 传给 Banner。
props: {
itemIndex: String,
itemStyle: Object,
params: Object,
dataList: Array
}<Banner v-if="storeInfo" :itemStyle="options.bannerStyle" :params="options.bannerParam" :dataList="banner"/>getPageData(callback) {
const app = this;
Api.home()
.then(result => {
app.banner = result.data.banner;
uni.removeStorageSync("reflashHomeData");
app.isReflash = false;
})
.finally(() => callback && callback())
}// 页面数据
export function home() {
return request.get(apiUri.home)
}另外,components/page/mixin.js 只处理跳转(onLink),不涉及数据请求。
- 变更/影响:无代码改动;梳理了数据流。
Banner依赖父级传入的dataList,父级通过Api.home()请求clientApi/page/home并将result.data.banner传入。