相互依赖的异步操作

正文

先简单描述一下我遇到的问题

这一段的目的是创建一个myTypeNav，然后利用它的数据构架另外一个mySubNav

但是在这里会发现数据并没有传入，这是为什么呢？

问题原因

由于在myTypeNav的创建过程中有发ajax请求这样的异步操作，所以实际上在resolve([myTypeNav.subTypes, myTypeNav.allGoods])，这两个数据还是null，构建mySubNav的时候自然会由于缺少参数失去效果，自然而然影响到了后面的then

解决方案

一、等待（这个方案已经废弃）

这个是在向学长请教之前写的代码，强行等待异步操作完成，通过多次试验估计一下大概要多长时间可以完成请求，然后setTimeout

大概是这个样子

setTimeout(() => {

if (myTypeNav.subTypes && myTypeNav.allGoods) {

resolve([myTypeNav.subTypes, myTypeNav.allGoods])

}

}, 100);

1

2

3

4

5

致命缺点：时间长了会影响页面生成的速度,时间短了可能会因为网络因素仍然得不到数据

二、放弃异步请求（丧失尊严的写法）

ajax请求的过程不管是自己写的函数还是别人造的轮子（比如jquery.ajax）都会提供参数，允许设置为同步请求。这样就可以在myTypeNav完全创建之后再进行下步操作。

但是这个不是学习的重点，不过多赘述。

三、将myTypeNav中用到的promise暴露出来（目前使用的方案）

既然myTypeNav是一个类，那么我们就可以给他设置属性。比如我们可以将请求封装到一个promise中，然后将这个promise作为一个属性进一步调用。

// myTypeNav.js

class TypeNav {

// 构造函数，option包括ele(容器),所有种类的tid和名字

constructor(option) {

// 忽略掉的代码

this.promise = this.getAll(this.current_id)

}

getAll(tid){

// 返回ajax请求的promise对象

return ($.ajax({

type: "GET",

url: this.url,

data: {

t_id: tid

}

}).then((data) => {

data = JSON.parse(data)

this.allGoods = data.goodsList;

this.subTypes = data.subTypeList;

return [this.current_id,this.subTypes,this.allGoods]

}))

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// goodList.js

// 构建一个含有 promise 的一级分类列表

myTypeNav = new TypeNav({

ele: typenavEle,

data: types,

url: localStorage.getItem('lexian-user-typeAPI')

})

// 一级列表点击，页面重构

myTypeNav.promise

.then((value) => {

// 由第一个传过来二级分类参数和一级下所有商品信息

// 构建二级分类列表

mySubNav = new SubNav({

ele: subNavEle,

data: value[1],

index: 0

});

goodDatas = value[2];

// 默认按照收藏量排序

goodDatas.sort(sortBylike);

// 二级列表点击，商品刷新

mySubNav.ele.addEventListener('click', () => {

goodsEle.innerHTML = '';

buildGoods(goodsEle, mySubNav.current_sub, goodDatas);

})

return [mySubNav.current_sub, value[2]]

})