首先 在项目的根目录中创建 request 文件夹
在文件中建一个js 文件用来放我们封装的接口请求
module.exports={
//三个形参 分别是 接口的地址、请求数据的方法、接口需要的参数
request(url,method,data){
//返回 一个Promis 对象 两个参数 是
1. resolve:成功后执行的回调
2. reject:失败后执行的回调
return new Promise((resolve,reject)=>{
uni.request({
//此处 http://api.intewl.cn/api 为根路径 也可以定义 基本路径
url:'http://api.intewl.cn/api'+url,
//方法
method:method,
//参数
data:data,
//执行回调
success(res){
resolve(res)
},
fail(err){
reject(err)
}
})
})
}
}
在全局引入,定义 并且导出 这样其他页面就可以使用了
// 全局的引入 封装好的request 接口的请求
const {
request} = require('./request/request.js')
//全局的 设置图片的基本路径 接口的原因
Vue.prototype.$imgUrl="http://api.intewl.cn/uploads/"
// 挂载到全局中 并且起个名字 用来使用
Vue.prototype.$request=request;
页面中使用 方法
//请求数据
getData(){
//参数
this.$request('/index','get',{
}).then(res=>{
//打印获取到的数据
console.log(res)
// 轮播图
this.banner=res.data.data.banner,
//头部·数据
this.header=res.data.data.recommend_cate,
// tab 部分
this.active= res.data.data.active,
// icon 图标
this.icon= res.data.data.icon,
// 首页广告 四张
this.ads=res.data.data.floor,
// 楼层数据
this.floor=res.data.data.cate
})
},
哈哈哈哈巴赫