关于js调桥的问题，js需要延迟几百毫秒才能调到桥的方法

[ijoncc]

在js端调用和android端约定好的桥方法，js端经常调用不到，延迟了500毫秒才能调用到，有时500毫秒都调用不到，请问这个问题有遇到过吗

[pengwei1024]

没有遇到过，js得在回调里面调用端方法哈，得确保端上注入完成了。

没改的话默认是下面这样

window.onJsBridgeReady = function () {
    JsBridge.native.ajax({...});
}

// or
document.addEventListener('onJsBridgeReady', function(){
    JsBridge.native.ajax({...});
})

[pengwei1024]

@ijoncc

[ijoncc]

没有遇到过，js得在回调里面调用端方法哈，得确保端上注入完成了。

没改的话默认是下面这样

window.onJsBridgeReady = function () {
    JsBridge.native.ajax({...});
}

// or
document.addEventListener('onJsBridgeReady', function(){
    JsBridge.native.ajax({...});
})

我们前端开发的同事按照你这种写法，可是走不这个监听里面，代码如下：
import axios from 'axios';
import config from './base';
import { BASE_URL } from '../../../config/global';
import { Base64Decode, Base64Encode } from '../../plugin/util';

import { Toast } from 'vant';

// 网页是否加载完毕
let loaded = false;
// function readyOk (callback) {
// if (loaded) {
// callback();
// } else {
// console.log('定时 500ms');
// setTimeout(callback, 500);
// }
// }

// function callApp (cmd, params) {
// return new Promise((res, rej) => {
// readyOk(function () {
// console.log('进入500ms回调');
// loaded = true;
// try {
// bridge.call(cmd, params, function (resp) {
// console.log('数据回调返回');
// res(resp);
// });
// } catch (e) {
// rej(e);
// }
// });
// });
// }
window.readyFn = function (callback) {
if (window.onJsBridgeReady) {
console.log('调用原生桥----2');
callback && callback();
} else {
console.log('调用原生桥----3');
document.addEventListener('onJsBridgeReady', function () { alert(1); }, false);
}
};
const callApp = (method, params) => {
console.log('调用原生桥----1');
return new Promise((res, rej) => {
try {
window.readyFn(() => {
console.log('调用原生桥----4');
window.bridge.call(method, params, data => {
console.log('调用原生桥----5');
res(data);
});
});
} catch (e) {
rej(e);
}
});
};
const NAME = 'user_app';
const localStorageHandler = {
dataName: NAME,
getItem: function (name) {
let obj = getItemData();
if (obj && obj[name]) {
return obj[name];
} else {
return null;
}
},
setItem: function (name, value) {
let obj = getItemData();
if (obj == null) obj = {};
obj[name] = value;
setItemData(obj);
},
delItem: function (name) {
let obj = getItemData();
if (obj && obj[name]) {
// 删除并重新赋值
delete obj[name];
setItemData(obj);
} else {
return false;
}
}
};

// localStorage取值
function getItemData () {
return JSON.parse(Base64Decode(window.localStorage.getItem(NAME)));
}
// localStorage赋值
function setItemData (obj) {
window.localStorage.setItem(NAME, Base64Encode(JSON.stringify(obj)));
}

const service = axios.create(config);
const errorMessage = {
400: '发出的请求有错误，服务器没有进行新建或修改数据的操作',
401: '用户没有权限（令牌、用户名、密码错误）',
403: '访问是被禁止',
404: '发出的请求针对的是不存在的记录',
405: '不支持当前请求方法',
406: '请求的格式不可得',
410: '请求的资源被永久删除，且不会再得到的',
422: '当创建一个对象时，发生一个验证错误',
500: '服务器发生错误，请检查服务器',
502: '网关错误',
503: '服务不可用，服务器暂时过载或维护',
504: '网关超时'
};

function registJSBridgeFinish (cmd, params) {
console.log('进入原生注册调桥');
return new Promise((res, rej) => {
try {
window.addEventListener('onJsBridgeReady', function () {
console.log('原生调桥注册成功');
try {
window.bridge.call(cmd, params, function (resp) {
console.log('数据回调返回');
res(resp);
});
} catch (e) {
rej(e);
}
});
} catch (error) {
rej(error);
}
});
}
// 注入token
service.interceptors.request.use(async (config) => {
console.log('进入拦截器');
// localStorageHandler.setItem("openid","oQ4DdsmZYGow-4eIUQq5qdnDE1Iw")
// localStorageHandler.setItem("openid","oh06gw7LmIc7E_pTCTUhMzEfqu8g")
config.headers.platform = 'police_app';
// config.headers.accessToken =localStorageHandler.getItem("accessToken");

let resp = await callApp('ls_get_location', {});
config.headers.accessToken = JSON.parse(resp).data;
// config.headers.accessToken = JSON.parse(resp).data;

// config.headers.accessToken = 'be746743ff9a4644874d36df2403c1a7';

return config;
}, function (error) {
console.log('请求失败,原因：' + error);
});

/* 添加一个返回拦截器 */
service.interceptors.response.use((response, b) => {
// 下载Excel文件
if (response.headers && (response.headers['content-type'] === 'application/octet-stream')) {
downloadUrl(response.request.responseURL);
response.data = '';
response.headers['content-type'] = 'text/json';
return response;
}

// resource/anon/userOperate/save
if (!response.data.success && response.data.code === 9001) {
// window.location.href='./login.html';

return Promise.reject('请求失败，请重试');

}

return response.data;
}, function (error) {
const status = error.response.data;

Toast.fail('系统忙，请稍后再试');

return Promise.reject('请求失败，请重试');
});

const Ajax = (points = {}) => {
// console.log(points)
let params = {};
params.url = points.url || '';
params.method = points.method || 'post';
if (points.headers) {
params.headers = points.headers;
}

if (points.baseURL) {
params.baseURL = points.baseURL;
}

params[(points.method.toLowerCase() == 'get' || points.method.toLowerCase() == 'delete') ? 'params' : 'data'] = points.data || {};

return service(params);
};
export default Ajax
;

[pengwei1024]

看上去写法没什么问题。需要延迟500ms确实没有出现过，如果你是Android RD，可以打开JsBridge 日志看看。如果有能复现的小demo，也能发给我一起看看原因