首先新建一个js文件 写公共的url
export const request = (params) =>{
// 定义公共的url
const baseUrl = 'http:api.zbztb.cn/api/public/v1'
return new Promise((resolve,reject) =>{
wx.request({
...params,
url:baseUrl + params.url,
success:(result)=>{
resolve(result)
},
fail:(err)=>{
reject(err);
}
})
})
}
发起请求的两种方式
- 这是正常的写法
// 获取分类导航数据
getCateList(){
request((url:"/home/catitems"))
.then(result =>{
this.setData({
catesList: result.data.message
})
})
}
- 也可以使用es7语法 通过async await来发送请求(需要在开发者工具里勾选ES6转ES5)
小程序目录下新建文件夹
lib/runtime/runtime.js
, 将以下代码拷贝进去
点击跳转到代码片段直接复制
在每一个需要使用async语法的页面js文件中 , 都引入以下这行代码, 引入之后不用做任何操作(注: 无法全局引入)import regeneratorRuntime form '../../lib/runtime/runtime.js'
引入之后就可以直接写async了
async 方法名(){ const res = await request({url:'/categories'}); this.Cates = res.data.message; // 把接口的数据存入本地储存中 wx.setStorageSycn('cates,{time:Date.now(),data:this.Cates}); //左侧菜单数据 let leftList= this.Cates.map(v => v.cat_name); // 右侧内容数据 let rightContent = this.Cates[0].children; this.serData({ leftMenuList, rightContent }) }
就是这么简单, 封装后不仅代码简洁了, 而且更利于日后的维护