微信小程序前端动态获取最新的轮播图优化

现在我们有一个这样的需求 就是后台改了轮播图的图片以及更新或者换位置 这是前端不能即使知道 就需要用到websocket 这样做虽然很简单但代码量也很大 所以我想出了一个方案：

思路 ：

1.既然我们想知道后台什么时候更新轮播图数据 那我们就得调接口，用两个数组来保存后端返回的数据

2. 第一次调用接口都保存上 此时不需要进行循环判断新老数据是否一致

3. 每次页面显示的时候就调用一次接口 这是需要进行判断 新老数据是否一致从而进行更新轮播图, 为什么要这样做呢？ 因为有时候网络慢 每次调接口都会重选渲染图片从而会导致出现空白

4. 两个数组进行对比数据是否发生变化 我写了一个demo可以参考套进去

let arr = [1,2,3,4]
let oldArr = [1,2,3,4]
let flag = true
if (arr.length !== oldArr.length) {
    flag = false
} else {
  arr.forEach((item,index) => {
    if (item !== oldArr[index]) {
      return flag = false
    }
  })
  console.log(flag)
}

// 判断两个数组里面的值是否发生变化以及位置的替换 返回布尔值

这样就可以不用websocket来实时监听轮播图的变化了 省了不少代码

------------------------------------------

以下是实战：

			// 获取轮播图数据
            // rotationList 是旧数据
			 getRotationData() {
				helper.ajax({
					url: '', // 地址
					methods: 'GET',
					data: {
						sidx: 'sort',
						sort: 'asc'
					},
					success: (res) => {
						let list = []
						let flag = false // true代表出现了数据不一样了
						// 第一次加载无需判断数据是否一样
						if (!this.rotationList.length) {
							this.rotationList = res.data.data.list
							res.data.data.list.forEach(item => {
								 if(item.state !== '0') {
									helper.fileStreamturn(this.baseUrl + item.image).then(res1 => {
										item.imageUrl = res1
									})
									 list.push(item)
								 }
							})
						    return	this.$refs.banner.init(list)
						}
				        
						// 判断新老数据得长度不一就重新渲染轮播图						
						if (this.rotationList.length !== res.data.data.list.length) {
							this.rotationList = res.data.data.list
							res.data.data.list.forEach(item => {
								 if(item.state !== '0') {
									helper.fileStreamturn(this.baseUrl + item.image).then(res1 => {
										item.imageUrl = res1
									})
									 list.push(item)
								 }
							})
							this.$refs.banner.init(list)
						} else {
						    // 如果长度一样 就得比较新老数据里面得每一条id和禁用状态是否一样
							res.data.data.list.forEach((item,index) => {
								if (item.id !== this.rotationList[index].id || item.state !== this.rotationList[index].state) {
									return flag = true
								}
							})
							if (flag) {
								this.rotationList = res.data.data.list
								res.data.data.list.forEach(item => {
									 if(item.state !== '0') {
										helper.fileStreamturn(this.baseUrl + item.image).then(res1 => {
											item.imageUrl = res1
										})
										 list.push(item)
									 }
								})
								this.$refs.banner.init(list)
							}
						}
					}
				}) 
			 },