微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

uniapp网络请求封装Promise

首先 在项目的根目录中创建 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
					
				})
			},

哈哈哈哈巴赫

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐