正在回答 回答被采纳积分+1
3回答
杨勤_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积分~
来为老师/同学的回答评分吧
0 星