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
					
				})
			},

哈哈哈哈巴赫

猜你喜欢

转载自blog.csdn.net/m0_57349005/article/details/117042105
今日推荐