使用Fetch&promises實(shí)現(xiàn)數(shù)據(jù)交互（5）

通過(guò)第四篇文章

《零基礎(chǔ)通過(guò)Ajax實(shí)現(xiàn)網(wǎng)易云音樂(lè)數(shù)據(jù)交互》的學(xué)習(xí)。

我們實(shí)現(xiàn)了使用ajax對(duì)遠(yuǎn)程api接口的使用，但是遺留下了一個(gè)問(wèn)題，就邏輯上存在前后順序的時(shí)候造成回調(diào)地獄的情況，比如

首先通過(guò)發(fā)送用戶名和密碼獲取用戶id，根據(jù)用戶id獲取用戶的歌單，根據(jù)用戶歌單獲取用歌曲名字，層層嵌套，

如下為代碼所示：

getUserid(){
    getSonglist(){
       getSongName(){
       //dom拼接
           orgDom(){

           }
       }
    }
};

大家會(huì)發(fā)現(xiàn)代碼層層嵌套非常難維護(hù)，如下圖所示：

這就是回調(diào)地獄，大家看到這個(gè)似乎想到了jquery的鏈?zhǔn)讲僮鳎?/p>

要是這樣，不就很美好了嘛？

getUserid(). getSonglist().getSongName().orgDom()；

這樣不就變成一根繩上的螞蚱了嗎？對(duì)，這就是Promise出現(xiàn)的原因，讓嵌套變成鏈?zhǔn)健?/p>

這里有一個(gè)很明顯的誤區(qū)，很多人總是覺(jué)得promise跟ajax一樣是用來(lái)請(qǐng)求數(shù)據(jù)的，其實(shí)這是錯(cuò)的，

這就好比很多人把github理解成git一樣，github是git的典型應(yīng)用場(chǎng)景，兩者是沒(méi)辦法畫等號(hào)的，同樣，

promise使用的經(jīng)典場(chǎng)景就是數(shù)據(jù)交互，但是不代表數(shù)據(jù)交互和promise畫等號(hào)。

說(shuō)到數(shù)據(jù)交互，promise配合著fetchApi用簡(jiǎn)直是完美。

那么fetchApi又是什么呢？別被單詞嚇到，我保證你用它的時(shí)候不會(huì)再想用ajax。俗話說(shuō)的好，ajax就像你的前女友一樣，該忘就忘吧。

有人說(shuō)忘不了前女友的原因只有兩個(gè)，時(shí)間不夠長(zhǎng)，現(xiàn)任不夠好。其實(shí)他們這么說(shuō)只是對(duì)了一半，前提是得有人給你介紹一個(gè)足夠好的現(xiàn)任，你的幸福生活就要來(lái)了，fetchApi就是那個(gè)出來(lái)時(shí)間已經(jīng)足夠長(zhǎng)，而且對(duì)你特別好的現(xiàn)任。

ajax的復(fù)雜和代碼不分離，相信已經(jīng)讓你很不爽了，那么我們看fetchApi怎么樣。一言不合就上代碼。來(lái)，一起回憶一下你跟你前女友吵架時(shí)候她猙獰的樣子。

// 獲取 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) {}
  }
}

// 打開連接, 發(fā)送數(shù)據(jù).
request.open('GET', 'https://davidwalsh.name/ajax-endpoint', true);
request.send(null);

ok,看看現(xiàn)任的溫柔。

// fettchApi做事很有條理
fetch('/some/url').then(function(response) {
    return //... 執(zhí)行成功, 第1步...
}).then(function(returnedValue) {
    // ... 執(zhí)行成功, 第2步...
}).catch(function(err) {
    // 中途任何地方出錯(cuò)...在此處理,有事回家說(shuō)
});

對(duì)對(duì)，就是這么優(yōu)雅，我知道你想啥，我有些功能想實(shí)現(xiàn)怎么辦呢？

var request = new Request('www.xxx.com', {
    method: 'POST', 
    mode: 'cors', 
    redirect: 'follow',
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
});

// 用起來(lái)
fetch(request).then(function() { /* handle response */ });

我怎么知道她啥想法，我想知道她怎么想的怎么辦？

fetch('url/')
    .then(function(responseObj) {
        console.log('status: ', responseObj.status);
    });

人家是個(gè)好姑娘，你只要還按照之前的跟你女朋友的方式跟人家處就行了。

那么問(wèn)題來(lái)了，說(shuō)的挺好，問(wèn)題是跟promise啥關(guān)系？我先不說(shuō)咱們先看看，

//構(gòu)建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可以把異步操作的內(nèi)容扔到外面去處理。你看到then不覺(jué)的眼熟嗎？

fetch是基于Promise設(shè)計(jì)的，從上面代碼也能看得出來(lái)，這就要求fetch要配合Promise一起使用。正是這種設(shè)計(jì)使代碼語(yǔ)法簡(jiǎn)單，更加語(yǔ)義化，邏輯也更清晰，避免層層嵌套，支持async/await

等等，這里有個(gè)問(wèn)題，咋個(gè)情況，你說(shuō)過(guò)promise不是半吊子嘛，另外async/await，這又是啥？

我們思考一下，問(wèn)題根源是層層嵌套，然后我們考慮改成一條繩上的螞蚱，總感覺(jué)哪里不對(duì)。

好，我們縷縷哈。假如你有一個(gè)前女友，刁鉆刻薄又愛(ài)花錢，然后分手了以后，你想找個(gè)通情達(dá)理，精明能干的。然后你發(fā)現(xiàn)隔壁家的鄰家女孩，人很乖巧，重點(diǎn)是不愛(ài)花錢，你覺(jué)好追，然后努力去追她了?，F(xiàn)在大家明白了問(wèn)題在哪了吧？你本來(lái)喜歡的是通情達(dá)理，精明能干的，最后你卻找了一個(gè)乖巧聽話的。還不明白，好，我們翻譯成技術(shù)語(yǔ)言。

因?yàn)閷訉忧短?，讓我們很難維護(hù)代碼，然后我們想像平常寫js代碼一樣，一步步按照順序往下擼代碼，然后你發(fā)現(xiàn)promise不錯(cuò)，他能鏈?zhǔn)讲僮?，也挺好。?wèn)題是我們的初心忘了嘛？

你不是想像寫同步代碼一樣擼代碼嗎？

有同學(xué)會(huì)說(shuō)，有的用就不錯(cuò)了，這就挺好了。但是你要明白，就是那些不將就的人，才給你帶來(lái)了promise，同樣那些不將就的人也帶來(lái)了異步接近完美的解決方案async/await。

下節(jié)課我們就重點(diǎn)說(shuō)說(shuō)這個(gè)async/await，有同學(xué)可能又說(shuō)了，那老師墨跡個(gè)啥，直接講async/await不就行了，這篇文章我不是白看了？

錯(cuò)！async/await 內(nèi)部的實(shí)現(xiàn)也是Promise，沒(méi)有這節(jié)課的東西，你根本不會(huì)明白下節(jié)課的東西。

最后一句話，永遠(yuǎn)不要因?yàn)樽吡颂枚藶槭裁闯霭l(fā)，更不要因?yàn)橹欢⒅繕?biāo)而忘記了看腳下的路。

                                                ·END·