uniMixin

uni-app&web

• vue项目中常规请求的混入插件。
• vue3项目中支持Composition API。
• 支持全局/局部请求前置/后置拦截

执行周期

• 请求-响应

全局before --> 全局xxxBefore --> 页面before --> 全局/默认useRequest
全局after  --> 页面after  --> 全局xxxAfter  --> State.data赋值  -->
页面finish --> 全局xxxFinish --> 全局finish

• 请求-异常

请求异常    --> 页面finish --> 全局xxxFinish --> 全局finish

注意

• Internet Explorer和较老的浏览器中不支持，所以请谨慎使用。
• 默认使用uni.request请求方式，其他方式请在全局定义中的useRequest中自行定义。

文档地址

插件引入

• NPM

npm install @xyzi/unimixin

• main.js

import uniMixin from "@xyzi/unimixin";
Vue.use(uniMixin);

Option API

get请求

export default {
	data(){
		return {
			/**** 默认生成data *****/
			getState: {
				path: undefined,  // 必填项，请求路径
				params: undefined,// 选填，请求参数
				data: undefined,  // 选填，请求结果
				loading: false,   // 不填，请求状态
				request: undefined// 不填，请求实例
			}
		}
	},
	methods:{
		/**** 默认生成请求方法 *****/
		getRequest(params){},     // method: "GET"
		/**** 选填方法 *****/
		getBefore(params){}, // 请求前
		getAfter(params){},  // 请求后
		getFinish(params){}, // 请求完成
	},
	uniMixin: "get",
}

post请求

export default {
	data(){
		return {
			/**** 默认生成data *****/
			postState: {
				path: undefined,  // 必填项，请求路径
				params: undefined,// 选填，请求参数
				data: undefined,  // 选填，请求结果
				loading: false,   // 不填，请求状态
				request: undefined// 不填，请求实例
			}
		}
	},
	methods:{
		/**** 默认生成请求方法 *****/
		postRequest(params){},     // method: "POST"
		/**** 选填方法 *****/
		postBefore(params){}, // 请求前
		postAfter(params){},  // 请求后
		postFinish(params){}, // 请求完成
	},
	uniMixin: "post",
}

多请求

export default {
	data(){
		return {
			/**** 默认生成data *****/
			getState: {
				path: undefined,  // 必填项，请求路径
				params: undefined,// 选填，请求参数
				data: undefined,  // 选填，请求结果
				loading: false,   // 不填，请求状态
				request: undefined// 不填，请求实例
			},
			postState: {
				path: undefined,  // 必填项，请求路径
				params: undefined,// 选填，请求参数
				data: undefined,  // 选填，请求结果
				loading: false,   // 不填，请求状态
				request: undefined// 不填，请求实例
			}
		}
	},
	methods:{
		/**** 默认生成请求方法 *****/
		getRequest(params){},     // method: "GET"
		postRequest(params){},     // method: "POST"
		/**** 选填方法 *****/
		getBefore(params){}, // 请求前
		getAfter(params){},  // 请求后
		getFinish(params){}, // 请求完成
		postBefore(params){},// 请求前
		postAfter(params){}, // 请求后
		postFinish(params){},// 请求完成
	},
	uniMixin: ["get", "post"],
}

Composition API

get请求

import {useUniMixin} from "@xyzi/unimixin";
export default {
	setup(){
		const {
			getState,
			getRequest,        //method:'GET',key:'get'
			getIntercept
		} = useUniMixin({
			path: undefined,  // 必填项，请求路径
			params: undefined,// 选填，请求参数
			data: undefined,  // 选填，请求结果
			//loading: false,    不填，请求状态
			//request: undefined 不填，请求实例
		})
		
		getIntercept('before',function(){}) // 请求前
		getIntercept('after',function(){})  // 请求后
		getIntercept('finish',function(){}) // 请求完成
		
		return {
			getState,
			getRequest,
		}
	}
}

post请求

import {useUniMixin} from "@xyzi/unimixin";
export default {
	setup(){
		const {
			postState,
			postRequest,        
			postIntercept
		} = useUniMixin({
			method: 'POST',   // 
			path: undefined,  // 必填项，请求路径
			params: undefined,// 选填，请求参数
			data: undefined,  // 选填，请求结果
			//loading: false,    不填，请求状态
			//request: undefined 不填，请求实例
		})
		
		postIntercept('before',function(){}) // 请求前
		postIntercept('after',function(){})  // 请求后
		postIntercept('finish',function(){}) // 请求完成
		
		return {
			postState,
			postRequest,
		}
	}
}