js异步方法如何改为同步方法

export const getUserToken = () => {
  let result = '';
  
  setupWebViewJavascriptBridge((bridge) => {
    bridge.callHandler('fetchUserInfo', (data) => {
      // 这一步是异步的,想请教改为同步的怎么写
      result = data;
    });
  });

  return result;
};

这是一段h5和iOS交互的方法,就是调用一个iOS方法,iOS返回一个参数回来,iOS的返回是用回调方法里返回的,调用这个方法还没等给result复制就直接返回默认的空字符串了,求各位大神指导怎么写才能返回正常取到的结果呢?

阅读 22.7k
3 个回答

改成同步会有很大的性能问题,比如在你等待的那几秒钟页面完全卡死,做不了任何事。

根据你的需求,你需要改成回调的方式,把需要处理的事件传递进来,而不是想着把result返回出去,如果一定要返回,可能要用到那些async/await,看你的环境支不支持了

1.回调方式

export const getUserToken = (cb) => {
  setupWebViewJavascriptBridge((bridge) => {
    bridge.callHandler('fetchUserInfo', (data) => {
      // 这里通过回调函数处理
      cb && cb(data)
    });
  });
};

//调用方式

getUserToken(fucntion(data){
    console.log(data)
    //这样就可以打印出dada
})

2.async/await方式

export const getUserToken = () => new Promise((resolve, reject) => {
  setupWebViewJavascriptBridge((bridge) => {
    bridge.callHandler('fetchUserInfo', (data) => {
      resolve(data)
    })
  })
})

// 用法:

async function(){ //注意`await`外层函数需要有`data `标识,表示里面是异步
    const data = await getUserToken()
    console.log(data )
}

改成同步是很难实现了,JS本身就是一个异步事件流的特性。
安心用回调吧,如果你的环境支持的话,倒是可以选择使用async/await来使代码看起来像同步的:

export const getUserToken = () => new Promise((resolve, reject) => {
  setupWebViewJavascriptBridge((bridge) => {
    bridge.callHandler('fetchUserInfo', (data) => {
      // 这一步是异步的,想请教改为同步的怎么写
      resolve(data)
    })
  })
})

// 用法:
await getUserToken() // 就能拿到结果了

// 抛开await以后是这样的
getUserToken().then(data => {
  // 在这里拿到结果
})

可以参考之前写过的一篇关于async的笔记:https://segmentfault.com/a/11...

把调用函数与回调函数分开写,在window下注册回调函数,让app去调用,这样就可以拿到回调结果了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏