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
传入。