Dva项目兼容性
之前上线的Dva项目，在Chrome和Safari中表现良好，但是在有些浏览器打不开，比如IE、某些版本的FireFox。这是由于在项目中，网络请求模块用到了fetch请求，由于fetch的局限性，导致部分浏览器不兼容。现记录下适配到IE的过程，以供自己学习。
Fetch
之前发现IE浏览器打不开，通过查询得知是fetch的原因。由于一开始没有关注过fetch请求，以为是dva框架自带的请求框架，就没有深入的学习。查询一系列资料之后，将fetch的知识学习了一遍。
Fetch API 是基于 Promise 设计，在你理解了Promise之后，Fetch对于你来说并不困难，通过阅读文档很快就能学会。推荐推荐 MDN Fetch 教程 和 万能的WHATWG Fetch 规范。由于旧的浏览器并不支持Promise，所以导致了Fetch的局限性。
Fetch原生支持率：
fetch兼容性.png
由此可见，Fetch的兼容性并不好。不过网上给出了相应的解决办法，通过引入polyfill以支持IE8+
- 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
- 引入 Promise 的 polyfill: es6-promise
- 引入 fetch 探测库：fetch-detector
- 引入 fetch 的 polyfill: fetch-ie8
- 可选：如果你还使用了 jsonp，引入 fetch-jsonp
- 可选：开启 Babel 的 runtime 模式，现在就使用 async/await
在尝试了以上方法，把它们引入后，并没有生效（不
Fetch 请求默认是不带 cookie 的，需要设置
fetch(url, {credentials: 'include'})
在实际操作的时候，加上了上述代码，依然不能带着cookie传递给后台（不
这里只介绍fetch的最简单应用，更具体的应用请看github
`post请求`
fetch(url, {
method: method,
body: formData,
}).then(checkStatus)
.then(parseJSON)
.then((data) => {
return { data };
})
.catch(err => ({ err }));
发起fetch请求，需要将参数转化成FormData类型，请求成功后会依次执行.then()函数，在data中获取后台数据。
XMLHTTPRequest
各种引入polyfill仍然不能在IE中兼容，随后将目光转移到了原生js上。查看文档发现：所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
由于没有用过jQuery和ajax，只是在查过文档稍稍了解了一下用法（误导
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {}
}
}
if (xhr) {
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = () => {
if(xhr.readyState === 4 && xhr.status === 200){
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send(paramstring);
}
虽然并不知道原理，但上述代码在IE浏览器上运行正常，可以正确的获取到后台的值。但是由于它时候在onreadystatechange属性中，一直调用后面的方法，整个请求下来，调用五次后面的方法，在最后一次readyState等于4的时候，才获取到值。而且值在回调函数中，不能直接赋值获取，需要通过调用者传递一个回调函数，将值回调出去。
由于项目中采用Promise回调，并不想做太大改动，所以摒弃了这种写法
Axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
{% asset_img 68747470733a2f2f73617563656c6162732e636f6d2f6f70656e5f73617563652f6275696c645f6d61747269782f6178696f732e737667.svg Axios兼容性 %}
由上图可知，axios兼容性十分不错，寄希望它可以解决Dva项目的兼容性问题。用axios整体替换掉fetch。Axios API和Fetch API十分相近，简单的用法和fetch基本一致：
`post请求`
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
然后在入口函数中引入es6-promise
require('es6-promise').polyfill();
经本地测试，IE浏览器可以正常访问，基本解决了IE兼容性的问题。
大致查看了一下文档，axios的拓展性以及可定制性比较高，操作空间比fetch要强，考虑后续将fetch都替换成axios
其他
- 在测试FireFox浏览器的时候，一直白屏。控制台报错
错误:样式表单index.css 未载入，因为它的MIME类型 "text/html" 不是 "text/css"
在index.html中，将
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改成
<!--[if IE]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<![endif]-->
这样，只有在IE下才会使用这个头部声明，而在FireFox下是不会使用的。
- 访问项目，到某路由下刷新出现白屏并且出现如下错误
index.js:1 Uncaught SyntaxError: Unexpected token <
在编译之前将index.js的相对路径改成绝对路径、
/* <script src="index.js"></script> */
<script src="/index.js"></script>
index.css同理
网友评论