UniApp Api接口封装

分手后的思念是犯贱 2022-12-25 15:52 291阅读 0赞

**全局注册，通过this调用**  
适用于vue 跟 uniapp

> 在uniapp 下  
> 跟pages同级下  
> 创建一个api文件夹下  
> 在创建一个http.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]  
**1.http.js**

//服务器地址
    const service = "域名/ip地址";
    
    module.exports = (params) => { 
    	let url = params.url;
    	let method = params.method;
    	let header = params.header || { };
    	let data = params.data || { };
    	// 请求方式 GET POST
    	if (method) { 
    		method = method.toUpperCase(); // 小写转大写
    		if (method == "POST") { 
    			header = { 
    				"content-type": "application/x-www-form-urlencoded"
    			}
    		}
    	}
    	// 发起请求 加载动画
    	if (!params.hideLoading) { 
    		uni.showLoading({ 
    			title: "加载中"
    		})
    	}
    	// 发起网络请求
    	uni.request({ 
    		url: service + url,
    		method: method || "GET",
    		header: header,
    		data: data,
    		dataType: "json",
    		sslVerify: false, // 是否验证ssl证书
    		success: res => { 
    			console.log(res)
    			if (res.data.code && res.data.code != 200) { 
    				// api错误
    				uni.showToast({ 
    					title:res.data.info,
    					icon:'none'
    				})
    				return;
    			}
    			typeof params.success == "function" && params.success(res.data);
    		},
    		fail: err => { 
    			uni.showToast({ 
    				title:res.data.info,
    				icon:'none'
    			})
    			typeof params.fail == "function" && params.fail(err.data);
    		},
    		complete: (e) => { 
    			console.log("请求完成");
    			uni.hideLoading()
    			typeof params.complete == "function" && params.complete(e.data);
    			return;
    		}
    	})
    }

**2：在main.js注册全局**

main.js文件

import Vue from 'vue'
    import App from './App'
    import http from './api/http.js'
    
    const msg = (title, duration=1500, mask=false, icon='none')=>{ 
    	//统一提示方便全局修改
    	if(Boolean(title) === false){ 
    		return;
    	}
    	uni.showToast({ 
    		title,
    		duration,
    		mask,
    		icon
    	});
    }
    
    Vue.config.productionTip = false
    Vue.prototype.http = http
    Vue.prototype.$api = { msg};
    
    App.mpType = 'app'
    
    const app = new Vue({ 
        ...App
    })
    app.$mount()

**3：调用接口**

onLoad() { 
              this.http({ 
    			  url:'域名/ip地址',
    			  method:'GET',
    			  	success: res => { 	
    			  				console.log(res)
    			  			},
    			  			fail: err => { 
    			  				console.log(res)
    			  			}
    		  })
    		},

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/5c434ca003404733a9a3e389933a9354.png