目录

banner这个文件是怎么请求到后端数据的

banner这个文件是怎么请求到后端数据的

我先全局查找哪里引用了这个 Banner 组件,以及查看同目录下的 mixin.jscomponents/page/index.vue,以确定数据是从父组件传入还是在组件内请求的。随后我会打开疑似相关的 API 文件(例如 api/page.js)确认首页/装修数据的请求来源。

[5 tools called]

我先打开首页 pages/index/index.vue 看它如何给 BannerdataList,并确认首页在哪儿发起接口请求。随后我会打开请求定义 api/page.js 以给出完整链路。

[1 tool called]

简短回答

components/page/banner/index.vue 本身不请求后端数据,它通过 props 接收父组件传入的 dataList。首页 pages/index/index.vue 调用 api/page.jshome() 接口拿到后端返回的 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 传入。