uniapp - api promise化

uniapp很多api都是异步的，而非同步（asyn），举个例子来说

 

例子1：

　　付款步骤：1、2、3，而实际运行可能是1、3、2...

 

 

 

 

例子2：

　　通过回调深渊解决它异步问题

 

 

 

例子3：

　　uniapp内置了async/await，这个的确很棒（封装了request请求情况就会好很多）- 它们有条不紊的进行着

 

 

 

 

但是请思考，uniapp那么多api且很多都是异步的！！！ 因此把它们api promise化是必须的（同步）

 

 

1.复制并且命名它

uniPromise.js

 

export default (callback) => {
	return (object = {}) => {
		return new Promise((resolve, reject) => {
			object.success = (...args) => {
				resolve(...args)
			};
			object.fail = (...args) => {
				reject(...args)
			};
			object.complete = () => {}
			callback(object)
		})
	}
};

　　

 

 

2.main.js 导入全局

import uniPromise from './uniPormis.js'

Vue.prototype.$uni = uniPromise;

　　

3.使用它

index.vue

 

<template>
	<view>
		uniPromise
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		components: {},
		onLoad() {

			// 示例1
			this.$uni(uni.getSystemInfo)().then(res => {
				console.log(res)
			})
			.then(()=>	this.$uni(uni.showToast)({
				title:'hello'
			}))
			.then(() =>	this.$uni(uni.showLoading)({
                title: '正在保存'
            }))
			.then(()=>	this.$uni(uni.hideLoading)())
			.then(()=>	this.$uni(uni.showModal)({
				title: 'hello',
				content: 'babbabab',
				showCancel: false,
				cancelText: '取消',
				confirmText: '确定'
			}))
			.then(res=>{
				if(res.confirm){
					console.log('按了确定')
				}else{
					console.log('按了取消')
				}
				
			})
			
			
			// uni.showModal({
			// 	title: '',
			// 	content: '',
			// 	showCancel: false,
			// 	cancelText: '',
			// 	confirmText: '',
			// 	success: res => {},
			// 	fail: () => {},
			// 	complete: () => {}
			// });
			
			

			// 示例2
			// this.$uni(uni.showModal)({
			// 	title: 'uniPromise'
			// })
			// .then(res => {
			// 	console.log(res)
			// 	if (res.cancel) {
			// 		// 中断本次运行
			// 		console.warn('中断本次运行... 出问题了')
			// 		return Promise.reject('这里填写出错的原因，并且中断它');
			// 	}
			// })
			// .catch(res=>{
			// 	console.log('捕获以后还能运行.. 不捕获直接中断',res);
			// })
			// .then(() => this.$uni(uni.showLoading)({
			// 	title: '正在保存'
			// }))
			// .then(() =>{
			// 	sleep(3000);
			// 	console.log('这里延迟了3s')
			// })
			// .then(() => this.$uni(uni.hideLoading)());
		},
		mounted() {},
		methods: {}
	}

	const sleep = numberMillis => {
		let now = new Date();
		let exitTime = now.getTime() + numberMillis;
		while (true) {
			now = new Date();
			if (now.getTime() > exitTime)
				return;
		}
	}
</script>

<style>
</style>