通過第四篇文章
《零基礎通過Ajax實現網易雲音樂數據交互》的學習。
我們實現了使用ajax對遠程api接口的使用，但是遺留下了一個問題，就邏輯上存在前後順序的時候造成回調地獄的情況，比如
首先通過發送用戶名和密碼獲取用戶id，根據用戶id獲取用戶的歌單，根據用戶歌單獲取用歌曲名字，層層嵌套，
如下爲代碼所示：
getUserid(){
getSonglist(){
getSongName(){
//dom拼接
orgDom(){
}
}
}
};大家會發現代碼層層嵌套非常難維護，如下圖所示：
這就是回調地獄，大家看到這個似乎想到了jquery的鏈式操作，
要是這樣，不就很美好了嘛？
getUserid(). getSonglist().getSongName().orgDom()；這樣不就變成一根繩上的螞蚱了嗎？對，這就是Promise出現的原因，讓嵌套變成鏈式。
這裏有一個很明顯的誤區，很多人總是覺得promise跟ajax一樣是用來請求數據的，其實這是錯的，
這就好比很多人把github理解成git一樣，github是git的典型應用場景，兩者是沒辦法畫等號的，同樣，
promise使用的經典場景就是數據交互，但是不代表數據交互和promise畫等號。
說到數據交互，promise配合着fetchApi用簡直是完美。
那麼fetchApi又是什麼呢？別被單詞嚇到，我保證你用它的時候不會再想用ajax。俗話說的好，ajax就像你的前女友一樣，該忘就忘吧。
有人說忘不了前女友的原因只有兩個，時間不夠長，現任不夠好。其實他們這麼說只是對了一半，前提是得有人給你介紹一個足夠好的現任，你的幸福生活就要來了，fetchApi就是那個出來時間已經足夠長，而且對你特別好的現任。
ajax的複雜和代碼不分離，相信已經讓你很不爽了，那麼我們看fetchApi怎麼樣。一言不合就上代碼。來，一起回憶一下你跟你前女友吵架時候她猙獰的樣子。
// 獲取 XHR 非常混亂!
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}
// 打開連接, 發送數據.
request.open('GET', 'https://davidwalsh.name/ajax-endpoint', true);
request.send(null);ok,看看現任的溫柔。
// fettchApi做事很有條理
fetch('/some/url').then(function(response) {
return //... 執行成功, 第1步...
}).then(function(returnedValue) {
// ... 執行成功, 第2步...
}).catch(function(err) {
// 中途任何地方出錯...在此處理,有事回家說
});對對，就是這麼優雅，我知道你想啥，我有些功能想實現怎麼辦呢？
var request = new Request('www.xxx.com', {
method: 'POST',
mode: 'cors',
redirect: 'follow',
headers: new Headers({
'Content-Type': 'text/plain'
})
});
// 用起來
fetch(request).then(function() { /* handle response */ });我怎麼知道她啥想法，我想知道她怎麼想的怎麼辦？
fetch('url/')
.then(function(responseObj) {
console.log('status: ', responseObj.status);
});人家是個好姑娘，你只要還按照之前的跟你女朋友的方式跟人家處就行了。
那麼問題來了，說的挺好，問題是跟promise啥關係？我先不說咱們先看看，
//構建Promise
var promise = new Promise(function (resolve, reject) {
if (/* 異步操作成功 */) {
resolve(data);
} else {
/* 異步操作失敗 */
reject(error);
}
});
promise.then(function() {
console.log('resolved');
}).then(function() {
console.log('resolved');
}).catch(){
掛了
};promise可以把異步操作的內容扔到外面去處理。你看到then不覺的眼熟嗎？
fetch是基於Promise設計的，從上面代碼也能看得出來，這就要求fetch要配合Promise一起使用。正是這種設計使代碼語法簡單，更加語義化，邏輯也更清晰，避免層層嵌套，支持async/await等等，這裏有個問題，咋個情況，你說過promise不是半吊子嘛，另外async/await，這又是啥？
我們思考一下，問題根源是層層嵌套，然後我們考慮改成一條繩上的螞蚱，總感覺哪裏不對。
好，我們縷縷哈。假如你有一個前女友，刁鑽刻薄又愛花錢，然後分手了以後，你想找個通情達理，精明能幹的。然後你發現隔壁家的鄰家女孩，人很乖巧，重點是不愛花錢，你覺好追，然後努力去追她了。現在大家明白了問題在哪了吧？你本來喜歡的是通情達理，精明能幹的，最後你卻找了一個乖巧聽話的。還不明白，好，我們翻譯成技術語言。
因爲層層嵌套，讓我們很難維護代碼，然後我們想像平常寫js代碼一樣，一步步按照順序往下擼代碼，然後你發現promise不錯，他能鏈式操作，也挺好。問題是我們的初心忘了嘛？
你不是想像寫同步代碼一樣擼代碼嗎？有同學會說，有的用就不錯了，這就挺好了。但是你要明白，就是那些不將就的人，纔給你帶來了promise，同樣那些不將就的人也帶來了異步接近完美的解決方案async/await。
下節課我們就重點說說這個async/await，有同學可能又說了，那老師墨跡個啥，直接講async/await不就行了，這篇文章我不是白看了？
錯！async/await 內部的實現也是Promise，沒有這節課的東西，你根本不會明白下節課的東西。
最後一句話，永遠不要因爲走了太久而忘了爲什麼出發，更不要因爲只盯着目標而忘記了看腳下的路。
·END·