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进行加密的参数
}

 

转载于:https://www.cnblogs.com/leiting/p/9897759.html

你可能感兴趣的:(JsBridge的异步不执行的处理--promise异步变同步)