b***@126.com
b***@126.com
  • 发布:2019-11-27 14:28
  • 更新:2020-07-04 16:38
  • 阅读:2014

【报Bug async await导致NVUE页面视图不更新(IOS端)

分类:nvue

修改新闻模板news-page.nvue中加载数据的请求为async await。
代码在附件。
问题:导致在IOS端await后面的赋值不更新视图。
news-page.nvue

            async loadData(refresh) {  
                if (this.isLoading) {  
                    return;  
                }  

                this.isLoading = true;  
                this.isNoData = false;  

                var startTime = new Date();  
                const [err, result] = await uni.request({  
                    url: 'https://unidemo.dcloud.net.cn/api/news',  
                });  
                // ------------------------------------------------------------------------  
                var endTime = new Date();  
                console.log("request time " + new Date(endTime - startTime).getTime());  
                const data = result.data;  
                this.isNoData = (data.length <= 0);  

                const data_list = data.map((news) => {  
                    return {  
                        id: this.newGuid() + news.id,  
                        newsid: news.id,  
                        article_type: 1,  
                        datetime: friendlyDate(new Date(news.published_at.replace(/\-/g,  
                            '/')).getTime()),  
                        title: news.title,  
                        image_url: news.cover,  
                        source: news.author_name,  
                        comment_count: news.comments_count,  
                        post_id: news.post_id  
                    };  
                });  

                if (refresh) {  
                    this.dataList = data_list;  
                    this.requestParams.minId = 0;  
                } else {  
                    this.dataList = this.dataList.concat(data_list);  
                    this.requestParams.minId = data[data.length - 1].id;  
                }  
                this.isLoading = false;  
                if (refresh) {  
                    this.refreshing = false;  
                    this.refreshFlag = false;  
                    this.refreshText = "已刷新";  
                    if (this.pullTimer) {  
                        clearTimeout(this.pullTimer);  
                    }  
                    this.pullTimer = setTimeout(() => {  
                        this.pulling = false;  
                    }, 1000);  
                }  

            },
2019-11-27 14:28 负责人:无 分享
已邀请:
何处不相逢

何处不相逢 - 何处不相逢

我也是遇见这样的问题,安卓端没有问题就是ios有问题请问如何解决的

3***@qq.com

3***@qq.com

好好说说

t***@163.com

t***@163.com - 80后

估计是写法有问题!因为async是异步执行。你只有再获取数据后才能执行后面的操作!检查下自己写法!

  • 何处不相逢

    数据那些都拿回来了log都出来了。安卓运行完全没有问题。ios 就是不去渲染视图,脑壳大

    2019-12-10 20:53

  • t***@163.com

    回复 何处不相逢: ios看来跟安卓渲染机制不一样,没办法!

    2019-12-10 21:02

b***@126.com

b***@126.com (作者)

只能用 函数回调 方式渲染

  • b***@126.com (作者)

    这个问题不是async await 导致的,只要是异步都不行。

    2020-01-09 14:04

  • 睡不醒哎

    回复 b***@126.com: 不是吧,ajax 本身就是异步的流程,我也遇到了类似的问题,我将我所有的 get 数据的ajax 返回的逻辑写到了then 的回调里就没有问题,post 的数据本身因为没有获取数据渲染页面,还是用的 async await

    2020-01-09 15:02

  • b***@126.com (作者)

    回复 睡不醒哎: 那不知道,我测试了很多次,then 回调都不行。 IOS。现在已经习惯了 callback 回调。

    2020-01-10 15:38

4***@qq.com

4***@qq.com - 前端开发者

作者解决这个问题没有, 如果解决了, 怎么解决的, 我也遇到这个问题了

  • 睡不醒哎

    我不是题主,但我之前也遇到了这个问题,我是去掉 async/await,用promise 回调做的

    2020-07-04 16:34

  • 4***@qq.com

    回复 睡不醒哎: 你好, 我的代码就是在promise的then中渲染的, 为什么还是不行呢

    2020-07-04 16:54

  • 何处不相逢

    自己写一个promise就解决了。 或者像楼下说的定时器包装也行。

    2020-07-06 14:24

仰泳的鱼

仰泳的鱼 - 仰泳的鱼

在结果上面加一个定时器包装一层就可以渲染。

该问题目前已经被锁定, 无法添加新回复