第三章云函数使用es6简介语法实现查询-CSDN博客

本文链接：https://blog.csdn.net/qq_54276699/article/details/135666367

本文比较了在微信小程序中使用ES6和传统方式获取云数据库数据并显示在页面上的差异。ES6采用Promise处理异步操作，使得setData可以直接在then中执行，而传统写法需额外声明`letthat=this`来解决this的指向问题。

摘要由CSDN通过智能技术生成

根据一种需求功能b对比es6简介写法和传统写法的区别，

需求：获取云数据库数据打在页面上

1.传统的写法

     wx.cloud.database().collection('goods')
            .get({
                //请求成功
                success(res) {
                    console.log('请求成功', res)
                    this.setData({
                        list:res.data
                    })
                },
                //请求失败
                fail(err) {
                    console.log('请求失败', err)
                }
            })

控制台上打出的结果

2.es6写法

   //es6简洁写法（查询数据）
        wx.cloud.database().collection('goods').get()
            .then(res => {
                console.log('请求成功', res)
              this.setData({
                  list:res.data
              })
            }).catch(err => {
                console.log('请求失败', err)
            })

控制台打出的结果

两种写法控制台上打出的结果是一样的

3.加页面

<view  wx:for="{{list}}">
<view>
商品名：{{item.name}},价格：{{item.price}}
</view>
</view>

es6打出的界面如下，而传统的查询方法中最终界面没有内容，原因就处在setData的地方，传统的写法不能直接给data赋值，es6简介写法直接就可以给data赋值，也就是说传统的写法，在success中this获取不到list，而es6简介写法就可以，

解决方法就是在传统方法上加上一句

let that=this；

写法如下：

 let that=this
        wx.cloud.database().collection('goods')
            .get({
                //请求成功
                success(res) {
                    console.log('请求成功', res)
                    that.setData({
                        list:res.data
                    })
                },
                //请求失败
                fail(err) {
                    console.log('请求失败', err)
                }
            })

这样就能查出来结果了