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