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

Question

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

  return result;
};

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

Answer 1

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

根据你的需求，你需要改成回调的方式，把需要处理的事件传递进来，而不是想着把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 )
}

Answer 2

改成同步是很难实现了，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...

Answer 3

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