JsBridge的異步不執行的處理--promise異步變同步

Hybird App：H5內嵌APP，前端用vue，APP之間的交互處理，適配安卓ios, 爲了下降開發成本，減小前端適配工做量，三端統一使用  WebViewJavascriptBridge

在進行後端接口請求的時候統一先把參數返給APP端，APP端進行加密以後，再返回給前端，前端再進行異步請求

因爲這裏涉及到異步操做，異步請求可能會在和APP交互以前執行，那樣就得不到APP返回的加密參數就執行了請求，因此是請求不到結果的，實際是要有前後順序的，要一步一步的操做，上一步成功以後進行下一步操做，

因此最終利用promise把APP，H5和後端之間的交互進行同步處理，一步一步進行交互操做，最終成功

1. 先寫web端的bridge.js

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
// alert('是不是Android：'+isAndroid);
// alert('是不是iOS：'+isiOS);
function setupWebViewJavascriptBridge(callback) {
  if(isAndroid){
    if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge)
    } else {
      document.addEventListener('WebViewJavascriptBridgeReady', function (event) {
          if(window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = WebViewJavascriptBridge);
          callback(WebViewJavascriptBridge)
      }, false)
    }
  }
  
  if(isiOS){
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
  }
  
}

export default {
  callhandler (name, data, callback) {
    setupWebViewJavascriptBridge(function(bridge) {
      bridge.callHandler(name, data, callback)
    })
  },
  registerhandler (name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}

2. 封裝和APP交互的方法 callBridge.js

export default {
    methods:{
        callBridgefn(json){ // 調用app加密方法
            let p = new Promise((resolve, reject)=>{
                this.$bridge.callhandler('encryptParams', JSON.stringify(json),(data) =>{  //encryptParams是APP端規定的方法名

　　　　　　　　　　　　resolve(data) })
           }) return p; 
       }, 
　　　　goBack(){ // 調用APP的返回 
　　　　　　this.$bridge.callhandler('goBack', (data) =>{ // goBack是APP端規定的方法名 
　　　　}) 
　　} 
  } 
}

3. 利用promise重寫axios異步請求方法 promise.js

import axios from 'axios'

export default{
    methods:{
     sendServer(param) { 
        return new Promise((resolve,reject)=>{            
                axios.post(url ,param).then(res=>{ // url爲請求地址
                resolve(res.data)
            }).catch(err=>{
                reject(err)
            })
        })
     },
    }
}
    

4. 頁面中請求接口的方法

_sendServer(param){
this.callBridgefn(param).then(data=>{ 
　　this.sendServer(JSON.parse(data))
　　　　.then(res=>{

 // 這裏寫要對後端返回的數據進行的操做 }) })
}

5. 在頁面初始化的時候調用

created(){
     this._sendServer(param) //param是要傳遞給APP進行加密的參數
}