相互依赖的异步操作

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/github_39457740/article/details/84075281

一些闲话：在18-19-1学期的项目中，由于想尝试一点没用过的东西，开始大力踩坑，特别感谢身在鹅厂的学长的远程强力支援（敬礼！）

正文

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

这一段的目的是创建一个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);

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

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

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

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