Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toast.hide doesn't work properly #341

Closed
meijie93 opened this issue Mar 2, 2019 · 4 comments
Closed

Toast.hide doesn't work properly #341

meijie93 opened this issue Mar 2, 2019 · 4 comments
Labels
@Components Components related optimizing Optimize performance or experience

Comments

@meijie93
Copy link

meijie93 commented Mar 2, 2019

场景:请求后台接口时使用Toast.loading展示"加载中",请求完成后调用Toast.hide隐藏
问题:如果调用方式形如

call_api1().then((res) => {
  call_api2()
})

就会出现第二个请求的Toast.loading无法被Toast.hide关闭的问题(即使多次调用也无法关闭)

Mand Mobile Version

出现问题时版本:1.6.0
尝试升级到1.6.8,没有解决

OS Version & Browser Version

Win10 17134 & Chrome 72

Recurring Steps

// 创建axios实例
const service = axios.create({
  ...
})

// request拦截器
service.interceptors.request.use(config => {
    Toast.loading('加载中')
})

// respone拦截器
service.interceptors.response.use(
  response => {
    Toast.hide()
    return response
  }
)

call_api1().then((res) => {
  call_api2()
})

Expectant Behaviors

Toast提示能够被Toast.hide关闭

Actual Behaviors

Toast提示无法被Toast.hide关闭

@xxyan0205
Copy link
Collaborator

xxyan0205 commented Mar 2, 2019

请确保call_api2的loading在call_api1的hide之后

Edit Vue Template

@xxyan0205 xxyan0205 added the need reproduce Need to reproduce the problem site label Mar 2, 2019
@meijie93
Copy link
Author

meijie93 commented Mar 3, 2019

@xxyan0205 你好

  1. 感谢你的demo。我现在理解无法关闭的原因是因为loading后hide太快导致的?比如

    Toast.loading('message');
    Toast.hide();

    就会出现关闭不了的情况
    可是这个[Toast] call Toast.hide immediately after Toast.loading is useless #242 (comment) 表示已经解决了,有点疑问

  2. 目前我的解决方法是在loading时记录下loading的时间,如果请求响应太快(不足100ms)就等待100ms后再调用hide

    // loading
    localStorage.setItem('toastTime', new Date().getTime())
    Toast.loading('message');
    
    // hide
    let toastTime= localStorage.getItem('toastTime')
    if (new Date().getTime() - toastTime< 100) {
      setTimeout(() => {
        Toast.hide()
      }, 100)
    } else {
      Toast.hide()
    }

xxyan0205 added a commit that referenced this issue Mar 3, 2019
support for toast show and hide synchronous calls

#341
@xxyan0205
Copy link
Collaborator

  1. 我现在理解无法关闭的原因是因为loading后hide太快导致的?

目前toast的show和hide是无法同步调用的,因为show内部存在异步逻辑(为了支持内部popup box的动画,需要等待最外层容器展示后再开始执行动画,否则动画无法执行。ps: 目前vue的版本可以同步了),所以当同步调用hide时,popup box还未展示,所以产生关不掉的效果。

当时的那个issue修复后来引发了其他问题,后来又被去掉了。

@xxyan0205 xxyan0205 added @Components Components related optimizing Optimize performance or experience and removed need reproduce Need to reproduce the problem site labels Mar 3, 2019
@meijie93
Copy link
Author

meijie93 commented Mar 3, 2019

明白了,谢谢

moyus pushed a commit that referenced this issue Mar 8, 2019
support for toast show and hide synchronous calls

#341
@moyus moyus closed this as completed Mar 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
@Components Components related optimizing Optimize performance or experience
Projects
None yet
Development

No branches or pull requests

3 participants