使用Promise發送Ajax

一年多前，就看過Pormise API，但當時覺得難懂且不知如何活用？
秉持每次出手就一定要有些創新的精神，想說趁Pormise已被原生支援，那麼就用Promise寫Ajax吧。

以下例子參考連結：
https://eyesofkids.gitbooks.io/javascript-start-es6-promise/content/contents/snippets.html
（連結中的作者，是上過React.js的老師，其coding style依然不用分號結尾的XD）

以前我會這麼寫：
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status === 200) {
console.log(this.responseText);
//TODO
}
} else {
console.log(new Error(this.statusText));
}
};
xhttp.open('GET', url, true);
xhttp.send();

現在我會這麼寫：
function sendAjax(url, method, data) {
return new Promise(function(resolve, reject) {
var xhttp = new XMLHttpRequest();
xhttp.responseType = 'text';
xhttp.onreadystatechange = function() {
if (xhttp.readyState === XMLHttpRequest.DONE) {
//XMLHttpRequest.DONE 等於 this.readyState === 4
if (xhttp.status === 200) {
resolve(xhttp.responseText);
} else {
reject(new Error(xhttp.statusText));
}
}
};
xhttp.onerror = function() {
reject(new Error('Network Error'))
};
xhttp.open(method, url, true);
xhttp.send(data);
});
}

sendAjax(url, 'GET').then(function(result) {
console.log(result);
//TODO
});

看起來換湯不換藥，也不是一定要用新工具寫。只就像每個時代存在每個時代的流行用語，活在哪個時代，就用哪種語言與人溝通。重要的是，每個時代的用法都需理解其用意。

希望這篇能給常處於資訊焦慮的自己一點打氣，每次總有那麼一些些不同，最終就能帶領自己走向革命性的創新與突破。