将jsbridge封装成promise

在与原生交互每次都要这么写

setupWebViewJavascriptBridge(() => {
	// bridge 操作
});
           

当同时调用多个协议的时候，这种回调函数的方式看起来很乱

但是我么可以将他封装成为一个promise

let bridgePromise = () => {
	// 判断当前浏览器是否是在ios下的webview打开运行的
	const isIos = () => /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent);
	// 判断当前浏览器是否是在安卓下的webview打开运行的
	const isAndroid = () => /(Android)/i.test(navigator.userAgent);

	return new Promise((resolve) => {
		// 可以加入延时器，比如2s还未加载然后就直接reject掉；但是要注意加载完成需要清除延时器
		let callback = () => resolve(window.WebViewJavascriptBridge);
		if (isIos()) {
			if (window.WebViewJavascriptBridge) { return callback(); }
			if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
			window.WVJBCallbacks = [callback];
			const WVJBIframe = document.createElement('iframe');
			WVJBIframe.style.display = 'none';
			WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
			document.documentElement.appendChild(WVJBIframe);
			setTimeout(() => { document.documentElement.removeChild(WVJBIframe); }, 0);
		}
		if (isAndroid()) {
			if (window.WebViewJavascriptBridge) {
				return callback();
			}
			document.addEventListener('WebViewJavascriptBridgeReady', callback, false);
		}
	});
};
           

然后这样去调用

bridgePromise.then((bridge) => {
	bridge.callHandler();
	bridge.registerHandler();
});
           

但是我们已经学了es6+的最新语法，那为什么还要这么写呢？

试试这么写！

let bridge = await bridgePromise;
	bridge.callHandler();
	bridge.registerHandler();
           

会不会在简洁明了一些呢~