vue.js、uniapp两种封装接口请求方法

超、凢脫俗 2021-07-24 19:03 1365阅读 0赞

## 前言：分别有两种封装方法适用于vue.js和uniapp；第一种：全局注册，通过this调用，不需要import引入js文件。第二种：需要请求接口的页面还要import一下。 ##

--------------------

ps:下面代码示例是uniapp项目

目录结构

![在这里插入图片描述][20201125111415822.png_pic_center]

--------------------

## 第一种封装 ##

**1：在项目根目录新建common目录http.js文件**

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 './common/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：调用接口**

xxx.vue文件

methods: { 
    	//初始化数据
    	getData() { 
    		this.http({ 
    			url: "api/index/getImg",
    			method:"GET",
    			success: res => { 
    				console.log(res)
    			},
    			fail: err => { 
    				console.log(res)
    			}
    		})
    	},
    }

--------------------

## 第二种封装 ##

**1：在项目根目录新建common目录service.js文件**

service.js

const service = "域名/ip地址";
    
    export default{ 
    	service
    }

--------------------

**2:调用接口**

xxx.vue文件

[20201125111415822.png_pic_center]: /images/20210724/2db928a2fdd64c68af601162916f91bf.png