使用Fetch&promises實現數據交互（5）

通過第四篇文章

《零基礎通過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·