主页（四）-通用接口调用方法的封装 & prosime用法& 使用es6语法导出封装模块

封装通用接口调用模块

/* 封装通用的接口调用方法 */ const request = (path) => { let url = 'https://www.ehomespace.com/api/public/v1/' + path return new Promise(function(resolve, reject) { // 这里实现接口调用 mpvue.request({ url: url, method: 'get', success: (res) => { // 获取接口调用的结果 resolve(res) } }) }) } export default request 重构轮播图和菜单的数据接口调用方式 async initData () { // 初始化数据 // 轮播图数据 let swiperRes = await request('home/swiperdata') this.swiperData = swiperRes.data.message // 菜单数据 let menuRes = await request('home/catitems') this.menuData = menuRes.data.message }

补：封装通用接口调用模块

// 封装一个通用的请求方法 const request = (path, method = 'GET', data = {}, header = {}) => { // 把异步的请求放到Promise实例中处理 let url = `https://www.zhengzhicheng.cn/api/public/v1/${path}` let p = new Promise(function (resolve, reject) { mpvue.request({ url, method, data, header, success: function (res) { resolve(res) } }) }) return p } export default request 重构轮播图和菜单的数据接口调用方式 async swiperData () { this.swiper = await this.queryData('home/swiperdata') }

接口调用的封装步骤-promise用法&用es6语法进行导出

第一步：在src下的utils文件夹下，新建文件request.js

/* 封装通用的后台接口调用方法 */ export default (path) => { return new Promise((resolve, reject) => { // 发送请求获取接口数据 let baseUrl = `https://www.zhengzhicheng.cn/api/public/v1/${path}` wx.request({ url: baseUrl, success: (res) => { if (res.data.meta.status === 200) { // this.swiper = res.data.message // 获取正常的后台数据 resolve(res.data.message) } } }) }) }

封装接口调用方法

第二步：在所需页面home/index.vue中进行引入

<script> import request from '../../utils/request.js' </script>

第三步：在所在页面进行使用

主页–轮播图模块

export default { data () { return { swiper: [], } }, methods: { swiperData () { // wx.request({ // url: 'https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata', // success: (res) => { // if (res.data.meta.status === 200) { // this.swiper = res.data.message // } // } // }) request('home/swiperdata').then(data => { // console.log(data) this.swiper = data }) } }, created () { this.swiperData () }, }

打印数据

补：主页–菜单模块

export default { data () { return { menu: [], } }, methods: { menuData () { // 获取菜单数据 // wx.request({ // url: 'https://www.zhengzhicheng.cn/api/public/v1/home/catitems', // success: (res) => { // if (res.data.meta.status === 200) { // this.menu = res.data.message // } // } // }) request('home/catitems').then(data => { this.menu = data }) } }, created () { this.menuData () }, }

第四步：页面展示效果同上

但是，此写法不是最好，推荐用async写法

1.轮播图写法

async swiperData () { // 获取轮播图数据 // wx.request({ // url: 'https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata', // success: (res) => { // if (res.data.meta.status === 200) { // this.swiper = res.data.message // } // } // }) // request('home/swiperdata').then(data => { // this.swiper = data // }) this.swiper = await request('home/swiperdata') },

2.菜单写法

async menuData () { // 获取菜单数据 // wx.request({ // url: 'https://www.zhengzhicheng.cn/api/public/v1/home/catitems', // success: (res) => { // if (res.data.meta.status === 200) { // this.menu = res.data.message // } // } // }) // request('home/catitems').then(data => { // this.menu = data // }) this.menu = await request('home/catitems') },

具体写法

接口数据展示动态效果，同上