将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();
           

會不會在簡潔明了一些呢~