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

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

---

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

目录结构

---

第一种封装

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文件

<script>
	import apis from "@/common/service.js"
	
	methods: {
		getData() {
			uni.request({
				url: apis.service + "api/task/recommendFriends",
				data: {},
				success: res => {
					console.log(res)
				}
			})
		}
	}
</script>