wepy

wepy开启使用promise

在app.wpy中使API promise化

export default class extends wepy.app {

    constructor () {
        super();
        this.use('promisify');
    }

}

使用：没加promise之前，res的值undefined

    async requestUrl() {
      let self = this;
      let time = util.getCurrentTime();
      let key = 'www.mall.cycle.com';
      let sign = md5.hex_md5((time + key).toLowerCase());
      let data = { sign: sign, time: time, page: 1, size: 10 };
      let url = 'http://api-mall.dyq086.cn/emall/api/mall/discoverList';
      let res = await wepy.request({
        url: url,
        method: 'GET',
        data: data,
        header: { 'Content-Type': 'application/json' },
        // success: function(res) {
        //   console.warn(res);
        //   return res;
        // }
      });
      console.warn('res=');
      console.warn(res);
    },

分析：

promise基本请求网络数据

    //注意：使用了promise，success回调方法无效

    requestBaseUrl() {
      let self = this;
      let url =
        'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=MA==&i=9';
      wepy
        .request({
          url: url,
          method: 'GET',
          // success: function(res) {
          //   console.warn(res);
          //   return res;
          // }
        })
        .then(d => console.log(d));
    },

async-await-网络请求

  async requestBaseUrlAwait() {
    let self = this;
    let url = 'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=MA==&i=9';
    let res = await wepy.request({
      url: url,
      method: 'GET'
    });
    console.warn(res.data);
    return res;
  }
  //结果
  //0

 

async-await-没有resolve结果的情况

 // pomise对象
  async f1() {
    let self = this;
    await new Promise(resolve => {
      console.log(1);
    });
    console.log(2);
  }

  testAwaitNotReturn() {
    let self = this;
    self.f1();
    console.log(3);
  }
  //结果
  //2
  //3

 async-await-有resolve结果的情况

  async f2() {
    let self = this;
    await new Promise(resolve => {
      console.log(1);
      resolve();
    });
    console.log(2);
  }

  testAwaitReturn() {
    let self = this;
    self.f2();
    console.log(3);
  }
  //结果
  //2
  //3
  //1

wepy例子

效果：

代码：

<style lang="less">
.userinfo-navigate {
  width: 280rpx;
  height: 80rpx;
  border: 1rpx solid red;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}
</style>

<template>
  <view class="container">
    <view class="userinfo-navigate" @tap="bindViewTap">{{ motto }}</view>
    <!-- 获取用户信息（头像/昵称） -->
    <view class="userinfo" @tap="handleViewTap">
      <image class="userinfo-avatar" src="{{ userInfo.avatarUrl }}" background-size="cover"/>
      <view class="userinfo-nickname">{{ userInfo.nickName }}</view>
    </view>
    <view>
      <view class="title" slot="title">测试数据绑定</view>
      <text class="info">{{setTimeoutTitle}}</text>
      <text class="info">{{now}}</text>
      <button @tap="plus('a')" size="mini">  +1  </button>
      <text class="info">{{mynum}}</text>
    </view>
    <button @tap="toast" size="mini">第三方组件</button>
    <!-- 引入并使用第三方组件-提示框 -->
    <toast />
    <!-- 使用Panel组件中模板 -->
    <panel>
      <view class="title" slot="title">使用Panel组件中模板</view>
    </panel>

    <panel>
      <view class="title" slot="title">测试并发网络请求</view>
      <view>返回结果: <text>{{netrst}}</text></view>
      <button @tap="request" size="mini"> 点我发起10个请求 </button>
    </panel>

    <panel>
      <view class="title" slot="title">测试组件Repeat</view>
      <repeat for="{{groupList}}" index="index" item="item" key="key">
        <group :grouplist="item" :index="index"></group>
      </repeat>
    </panel> 

    <panel>
      <view class="title" slot="title">测试列表</view>
      <list></list>
    </panel>       
</view>
</template>

<script>
import wepy from 'wepy';
import Toast from 'wepy-com-toast';
import Panel from '@/components/panel'; // alias example
import Group from '../components/group'
import List from '../components/list' // aliasFields example
//通过继承自wepy.page的类创建页面逻辑
export default class One extends wepy.page {
  config = {
    navigationBarTitleText: 'two'
  }
  components = {
    panel: Panel,
    toast: Toast,
    group: Group,
    list: List,    
  }    
    //可用于页面模板绑定的数据
    data = {
      mynum: 20,
      motto: '跳转到index页面',
      userInfo: {},
      setTimeoutTitle: '标题三秒后会被修改',
      netrst: '',
      groupList: [
      {
        id: 1,
        name: '点击改变',
        list: [
        {
          childid: '1.1',
          childname: '子项，点我改变'
        }, {
          childid: '1.2',
          childname: '子项，点我改变'
        }, {
          childid: '1.3',
          childname: '子项，点我改变'
        }
        ]
      },
      {
        id: 2,
        name: '点击改变',
        list: [
        {
          childid: '2.1',
          childname: '子项，点我改变'
        }, {
          childid: '2.2',
          childname: '子项，点我改变'
        }, {
          childid: '2.3',
          childname: '子项，点我改变'
        }
        ]
      },
      {
        id: 3,
        name: '点击改变',
        list: [
        {
          childid: '3.1',
          childname: '子项，点我改变'
        }
        ]
      }
      ]      
    }        

    //事件处理函数(集中保存在methods对象中)
    methods = {
      plus () {
        this.mynum++
      },
      bindViewTap () {
        console.log('navigateTo index');
        wx.navigateTo
        ({
          url: '/pages/index'
        })
      },
        //使用第三方组件的提示框
        toast () 
        {
          let promise = this.$invoke('toast', 'show', 
          {
            title: '自定义标题',
            img: 'https://oimagec3.ydstatic.com/image?id=1298949196441763131&product=xue'
          })
          promise.then((e)=>
          {
            console.log('toast done img')
          })
        },

        request () {
          let self = this
          let i = 10
          let map = ['MA==', 'MQo=', 'Mg==', 'Mw==', 'NA==', 'NQ==', 'Ng==', 'Nw==', 'OA==', 'OQ==']
          while (i--) {
            wepy.request({
              url: 'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=' + map[i] + '&i=' + i,
              success: function (d) {
                self.netrst += d.data + '.'
                self.$apply()
              }
            })
          }
        },
      };

      onLoad() {
        let self = this
      //获取用户信息
      this.$parent.getUserInfo(function (userInfo) {
        if (userInfo) {
          self.userInfo = userInfo
          // console.log(userInfo)
        }
        setTimeout(()=>{
          self.setTimeoutTitle = '到三秒了,新标题'
          self.$apply()
        },3000)

        self.$apply()
      })
    }

    computed = {
      now () {
        console.log('computed-now');
        return +new Date()
      }
    }
  }
  </script>