转载自martin的博客
最近在学习es6的promise，已经看了第2遍了，这次看过感觉有点懂了，去阮一峰的es6教程上又看了一下，有两个例子，一个是异步加载图片，一个是ajax。对异步加载图片还是不太懂，但是ajax我总会吧，就尝试用promise+ajax试下笔，结果。。。。
发个文章，记录今天苦逼的一天。
ajax通信代码
ajax用原生的Js来实现的话，其实核心是利用XMLHttpRequest对象，可以进行get和post通信，这不是今天的问题，问题是用谷歌浏览器的时候报错。源代码如下：回头一定研究一下如何让静态网页代码高亮。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script>
function loadXml() {
const xmlhttp= new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
console.log(xmlhttp.readyState);
console.log(xmlhttp.status);
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "flex.html", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id='myDiv'><h2>test on ajax</h2></div>
<button type='button' onclick='loadXml()'>修改内容</button>
</body>
</html>
上述代码定义了一个XMLHttpRequest对象，通过open和send方法实现了对本地flex.html的通信，获取其中的信息并写入到DOM的myDiv中去，当用chrome的时候，时始终提示Load出错，没有权限，但是用firefox就没有问题，所以去网上搜索了一下，其实是chrome为了安全，禁止了网页与系统文件的ajax，所以只需要在chrome的快捷方式上加入--allow-file-access-from-files选项就可以了。如下图：
图一
要吐槽的地方其实是，我改了很多遍，浏览器重启了很多遍，都没有成功，最后发现竟然是因为我在另一个桌面上一直开着chrome，（win10多桌面），导致了一直失败，最后，修改了这里，终于没报错了，然而还是没有效果，所以把xmlhttp.status的值输出了一下，发现输出是0，去网上搜了一下，这个是因为本地通信，所以是0.但是在firefox中依旧是200。
promise+ajax
吐槽完，还是得把该做的工作做完，用promise+ajax来实现更高端的效果。promise其实是回调函数的更优雅的写法，它的写法更加易懂并且简单。
function loadXml() {
const p = new Promise((resolve, reject) => {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
xmlhttp.open("GET", "flex.html", true);
xmlhttp.send();
function handler() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.status));
}
}
});
p.
then(data => document.getElementById("myDiv").innerHTML = data).
catch(data => document.getElementById("myDiv").innerHTML = data);
}
上面代码通过新建一个Promise,内部使用xmlhttp.onreadystatechange来触发不同的resolver,通过绑定then和catch来完成不同的功能。
总结
本地ajax通信，只需要在chrome进行简单的快捷方式修改就可以了，Promise类似回调，但是写起来更加方便，尤其是当级联的时候（本程序没有体现）。
网友评论