使用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·