uniapp 封装网络请求 公用组件

首先在项目的根目录创建一个util.js文件，在js文件中写入当前封装请求的方法

let apiReq={
    
    
	req(obj){
    
    
		var method = obj.method ; // 请求方式,默认为GET
		var url = 'http://192.168.0.122:8080'+obj.url; // 请求路径 
		var data = obj.data||undefined; // 请求数据
		var header = obj.header; // 请求头
		var success = obj.success; // 成功回调函数
		uni.showLoading({
    
    title:'加载中...'});
		uni.request({
    
    
			url: url,
			data: data,
			method: method,
			header: header,
			success: ((res) => {
    
    
				if(res.statusCode === 200){
    
    
					success(res)
					uni.hideLoading();
				}else{
    
    
					uni.hideLoading();
					uni.showModal({
    
    
						content:"" + '请求失败'
					});
				}
			}),
			fail:((err)=>{
    
    
				fail(err)
			})
		})
	}
}
export default apiReq

封装完毕之后，在main.js中引入util.js 并通过Vue.prototype导出

import apiReq from './util.js'
Vue.prototype.$apiReq = apiReq

最后在需要使用的页面使用就可以了

// 获取背景图
			backgroundMap(){
    
    
				this.$apiReq.req({
    
     // 创建对象
					url: '/ui/shop/banner/list', // 示例请求路径
				    method:"get", //如果是post请求 可以直接修改为post
					data : {
    
    
					     'nickName':username, //传参
						 'sex':gender,
						 'avatar':avatarUrl,
						 'loginIp':val,
					},
					success: (res) => {
    
    
						this.imageURL=res.data.rows[1].bannerImg
					},
				 })
			}