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

淩亂°似流年 2024-04-21 19:23 55阅读 0赞

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

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

**1.传统的写法**

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

控制台上打出的结果

![298e96a3071e41759de197b1d3f7dd31.png][]

2.es6写法

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

控制台打出的结果

![4e146c0cf48a4bac95e5c36ff4f2626a.png][]

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

3.加页面

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

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

![7f23e4cba57a48819054f36bfc680bfa.png][]

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

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)
                    }
                })

这样就能查出来结果了

![7f23e4cba57a48819054f36bfc680bfa.png][]

[298e96a3071e41759de197b1d3f7dd31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/e69f9332a5d7448da345009ea1625036.png
[4e146c0cf48a4bac95e5c36ff4f2626a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/f4eb5cf3cbe345de8e505795a14425a9.png
[7f23e4cba57a48819054f36bfc680bfa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/29efd5cb6b8b4975be5f834aee46a8ee.png