记一次兼容处理经历

  要让一款发布初期的软件产品尽快进入常态化运营， 开发人员需要做的大部分工作，是解决兼容性问题。毕竟上线之前主要内测的是功能逻辑能否走通，对大部分公司而言，测试代码是否兼容，我们没有足够精力和人力去在市面上每一款浏览器甚至是手机端进行，而往往凭借的是既往经验。当然由此带来的前端背锅局也屡见不鲜。

  就在五一前夕，产品经理希望上线一些新功能，经过一系列操作，代码在4月30号下班前成功上线，随即放假。直觉告诉我可能会出乱子，于是我背着本儿前去赴女友的约，果不其然，背着本儿约会是正确的。┓( ´-` )┏

  有客户反馈网页界面一直处于加载状态，无法进行其他操作。我的第一反应是接口报错，请求异常，但转念一想也不对，我设置接口10秒无响应强行走 catch，带着疑问我检查设置加载态的逻辑，我在 axios 请求中这样写：

loadIndexInteractionData(isRefresh) {
	this.$toast.loading({ duration: 0, forbidClick: true });
	this.$http.get('/xxx').then(res => {
	     // 略
	}).finally(_ => {
	    this.$toast.clear();
	})
}

  乍一看没什么问题，并且这段代码也不是本次上线修改的部分，逻辑也很明确，使用 Vant-ui，接口请求前设置 loading，不管接口请求成功与否，最终清除 loading 态。看到这里我一拍脑门儿，我的天，finally 这个回调函数，应该是有兼容问题的呀！回想前一款产品，请求接口部分的代码也是类似的写法（毕竟是我去架构的），但是前一款产品我引用过一个依赖叫 promise.prototype.finally ，在 axios 实现 finally 回调方法，这一款产品没有引用，最初是因为忘记，然而直到这之前一直是没有问题的。其实开发过程中我也有过疑问为什么这里不引用却可以正常用，直到前些天看过一篇文章：《 ES6、ES7、ES8、ES9、ES10新特性一览 》，文中提到：

ES9新特性（2018）

  ……

  一个Promise调用链要么成功到达最后一个 .then() ，要么失败触发 .catch() 。在某些情况下，你想要在无论Promise运行成功还是失败，运行相同的代码，例如清除，删除对话，关闭数据库连接等。

   .finally() 允许你指定最终的逻辑：

function doSomething() {
	doSomething1()
	.then(doSomething2)
	.then(doSomething3)
	.catch(err => {
		console.log(err);
	})
	.finally(() => {

	});
}

  当时豁然开朗的我坚信这么做万事大吉，殊不知这并不适配老型号的手机，所以这个锅必须是我背。这是一个由于不严谨造成的兼容性问题，其实还有一些不是细心就可以避免的兼容性问题。我做过最让人头大的项目是17年底做的微信播放器，当时“X5内核”，“同层播放”，“浏览器挟持接管”等一系列关键词涌出来，为提供沉浸式播放，避免系统接管视频，实现视频窗口之上可交互，提升用户体验。由于视频的全屏尺寸、横竖屏切换等都是靠 js 计算得来，在我调试好安卓标准屏（宽高比16:9）和全面屏（当时是18:9），自认为已经完工后，往后随之而来的，是持续两年（至今）的兼容性反馈问题，市面上的手机型号尺寸真的是层出不穷，永远会有“视频播放有黑边”，“视频尺寸不对”等一系列问题，我将视频强制铺满，又会有“画面被拉伸”的种种反馈。如今我打算接下来更换播放器，站在巨人的肩膀上做二次开发。

  以上是我的一些个人经历，重视兼容性问题，在各种 PC 平台上，要么彻底放弃（如 Vue 对老版本 IE 是明确放弃的），要么就尽可能做到兼容。对于移动端，切忌盲目使用最新的技术，就算使用，也一定要看文档，明确其兼容性，做好优雅降级。这样，问题少，压力也就小。希望这些能给你帮助。: )

（END）