问一个VUE下微信网页授权的OPENID异步赋值方法

海洋之蓝
  • 137

有两个页面
content.vue:内容页
auth.vue:微信网页授权页

用户首先访问内容页,内容页先让用户授权并想要获取用户的openid。这时候发现没有openid,直接跳转到网页网页授权页(auth.vue),使用静默方式先向微信服务器请求code。然后发送code给我的服务器,然后我的服务器再把code等参数发送给微信服务器换回用户的openid,带着openid继续返回到内容页。流程结束

就在我的服务器再把code等参数发送给微信服务器换回用户的openid遇到一个问题

//向后端发送请求获取openid等信息
axios.post("../api/weixin/getopenid?code="+code).then(res=>{
    if (res.data.code == 1) {
        localStorage.setItem('openid',res.data.data.openid);
    }
})
setTimeout(function(){
    this.$router.push({
       path: '/content'
    })
   },1000);

因为axios.post是异步,如果下面没有使用setTimeout推迟跳转到内容页,结果内容页还是没有在本地缓存中找到openid,又会继续来请求,造成死循环。

有没有什么其他办法,把这个openid给及时的保存起来供其他页面调用?

回复
阅读 421
2 个回答
✓ 已被采纳

为啥不这样呢?

//向后端发送请求获取openid等信息
axios.post("../api/weixin/getopenid?code="+code).then(res=>{
    if (res.data.code == 1) {
        localStorage.setItem('openid',res.data.data.openid);
this.$router.push({
       path: '/content'
    })
    }
})

或者这样

//向后端发送请求获取openid等信息
axios.post("../api/weixin/getopenid?code="+code).then(res=>{
    if (res.data.code == 1) {
        localStorage.setItem('openid',res.data.data.openid);
    }
})
localStorage.getItem('openid')&& setTimeout(function(){
    this.$router.push({
       path: '/content'
    })
   },1000);

这种情况下setTimeout不可靠,要是网络延迟超过1000ms,接口没返回,也会出现死循环,
除了像楼上的,还可以用async await写成同步的

(async () => {
  //向后端发送请求获取openid等信息
  const res = await axios.post("../api/weixin/getopenid?code="+code);
  if (res.data.code == 1) {
     localStorage.setItem('openid',res.data.data.openid);
     this.$router.push({
       path: '/content'
     })
  }
  
})()
你知道吗?

宣传栏