关于获取后台接口数据,以及异步操作
// 获取商品推荐的列表数据 async recommend(id,index) { // 点击后传一个数组里的id过来,index 是下标 // 获取一级菜单滑块的数据 let opts = { url:'接口', method: '请求方式' }
// 传参 let param = { use:2 // 传2表示某一类型 } const res = await this.$http.httpRequest(opts,param) this.recommendList = res.listData console.log('推荐:',this.recommendList) console.log(id) // 根据滑块的id获取商品详情数据,把id传给接口,显示对应滑块的数据 let optss = { url:'接口', method: '请求方式' }
// 传参 let params = { pageNumber: 1, pageSize: 10, ppcId:id } const ress = await this.$http.httpRequest(optss,params) // this.shop = ress.data.content // 商品推荐 // console.log('商品推荐:',this.shop) // 判断我存储商品的数组是否为空,为空就默认获取第一个滑块里的数据,进行商品数据展示 if(this.shop == '') { const businessId = this.recommendList[0].id; // 获得一级菜单的id,根据一级菜单的id拿到二级菜单的商品数据 this.count = 0 // 默认第一个滑块的颜色 let optss = { url:'接口', method: '请求方式' } // 然后传参 let params = { pageNumber: 1, pageSize: 10, ppcId:businessId } const ress = await this.$http.httpRequest(optss,params) this.shop = ress.data.content // 获取商品默认的第一个一级菜单的详情商品数据 }else { this.shop = ress.data.content this.count = index // index是下标,点击后改变被点击滑块的文字颜色,就不再默认为改变第一个滑块的颜色 }
要点:这里的async和await是异步操作,要同时使用,不然await会没有效果