7月老师,onLoad不加aysnc,也能拿到data,是因为什么

7月老师,onLoad不加aysnc,也能拿到data,是因为什么

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
杨勤_cd 2020-05-02 16:56:55

我试了下你所描述的场景,看上去和我之前的描述并无冲突,但是应该更加有助于理解吧。

http://img1.sycdn.imooc.com//climg/5ead359e093fc0a113280531.jpg

  • 提问者 gaoMu #1
    好的,谢谢,我也加个sleep试一下
    2020-05-02 17:04:24
杨勤_cd 2020-05-02 16:12:34
我认为此处页面是否渲染这个Theme,和是否有async/await并没有关系:
加上async/await,必须等到getHomeLocation执行完并且resolve(也就是正常执行,不报错),才会执行后面的console.log;
不加async/await,getHomeLocation这个异步方法无论执行正确与否,都不影响后面的log方法。

此类问题关键在于理解async/await关键字在看以下案例之前只需要知道一点

await关键字必须用到async标记的方法内。

# Theme.js
  async getHomeThemes() {
    const names = `${Theme.locationA},${Theme.locationE},${Theme.locationF},${Theme.locationG}`
    //Case1.因为需要等待request正确执行后,才会为实例的themes属性赋值,所以需要await,从而方法名上也需要加上async。
    this.themes =await Http.request({
      url: '/theme/by/names',
      data: {
        names
      }
    })
  }
  //Case2.此方法只是从实例属性Themes中过滤值,并不需要等待什么,所以不用async/await。其实是需要确保themes中获取了值然后才去find的,这一点可以留给调用方去做,详见Case3。
  getHomeLocationA() {
    return this.themes.find(t => t.name === Theme.locationA)
  }
# home.js
  async initAllData() {
    const theme = new Theme()
    //Case3.因为需要先调用theme.getHomeThemes()方法确保theme.themes有值,再去根据值过滤,所以此处需要await
    await theme.getHomeThemes()
    //Case3.虽然后面的setData需要引用ThemeA/F,但是由于Case3的await已经确保了theme.themes有值,所以此处不需要await(并且由Case2知,该方法也没有设计成async方法)
    const themeA = theme.getHomeLocationA()    
    const themeF = theme.getHomeLocationF()

    //Case5.后面的setData方法均会引用以下异步方法所返回的值(这些方法我都没有加async,但是因为我们封装的request方法本身就会返回一个promise对象了,所以这些方法都可以理解为异步方法),所以需要await
    const spuInfoE=await Theme.getHomeLocationESpu()
    const bannerB = await Banner.getHomeLocationB()
    const categoryC = await Category.getHomeLocationC()
    const activityD = await Activity.getHomeLocationD()
    this.setData({
      themeA,
      spuInfoE,
      themeF,
      bannerB,
      categoryC,
      activityD
    })
  },
总结如下:
PS:本人初学,以上纯属个人观点,如果有误,还望指正。


  • 总结写漏了: 1.await必须用在async标记的方法里面,否则无效; 2.程序后面的逻辑依赖于前面异步方法返回的结果才有必要await 3.await后一定是跟一个异步方法调用,否则没有意义 4.返回一个promise的方法是异步方法,常见情形分为两种:使用async将方法返回值转为promise对象从而变为异步方法;方法本身就是返回一个promise对象。
    2020-05-02 16:22:06
  • 提问者 gaoMu #2
    大佬,就是不加await,数据不一定会拿到?是这个意思吧
    2020-05-02 16:27:25
  • 杨勤_cd 回复 提问者 gaoMu #3
    我认为,数据是一定会拿到的,加上await可以确保一定是先拿到数据,再执行后面的逻辑(通常指页面渲染),这也是为什么如果后面没有代码或者逻辑和它没有关系的话,就不用await的原因。
    2020-05-02 16:36:27
提问者 gaoMu 2020-05-01 17:18:26

写错了,是async

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师