使用Fetch&promises实现数据交互(5)
通过第四篇文章

零基础通过Ajax实现网易云音乐数据交互》的学习。
使用Fetch&promises实现数据交互(5)
我们实现了使用ajax对远程api接口的使用,但是遗留下了一个问题,就逻辑上存在前后顺序的时候造成回调地狱的情况,比如

首先通过发送用户名和密码获取用户id,根据用户id获取用户的歌单,根据用户歌单获取用歌曲名字,层层嵌套,

如下为代码所示:

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

           }
       }
    }
};

大家会发现代码层层嵌套非常难维护,如下图所示:
使用Fetch&promises实现数据交互(5)

这就是回调地狱,大家看到这个似乎想到了jquery的链式操作,

要是这样,不就很美好了嘛?

getUserid(). getSonglist().getSongName().orgDom();

这样不就变成一根绳上的蚂蚱了吗?对,这就是Promise出现的原因,让嵌套变成链式。

这里有一个很明显的误区,很多人总是觉得promise跟ajax一样是用来请求数据的,其实这是错的,

这就好比很多人把github理解成git一样,github是git的典型应用场景,两者是没办法画等号的,同样,

promise使用的经典场景就是数据交互,但是不代表数据交互和promise画等号。

说到数据交互,promise配合着fetchApi用简直是完美。
使用Fetch&promises实现数据交互(5)

那么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,这又是啥?

我们思考一下,问题根源是层层嵌套,然后我们考虑改成一条绳上的蚂蚱,总感觉哪里不对。
使用Fetch&promises实现数据交互(5)

好,我们缕缕哈。假如你有一个前女友,刁钻刻薄又爱花钱,然后分手了以后,你想找个通情达理,精明能干的。然后你发现隔壁家的邻家女孩,人很乖巧,重点是不爱花钱,你觉好追,然后努力去追她了。现在大家明白了问题在哪了吧?你本来喜欢的是通情达理,精明能干的,最后你却找了一个乖巧听话的。还不明白,好,我们翻译成技术语言。

因为层层嵌套,让我们很难维护代码,然后我们想像平常写js代码一样,一步步按照顺序往下撸代码,然后你发现promise不错,他能链式操作,也挺好。问题是我们的初心忘了嘛?

你不是想像写同步代码一样撸代码吗?

有同学会说,有的用就不错了,这就挺好了。但是你要明白,就是那些不将就的人,才给你带来了promise,同样那些不将就的人也带来了异步接近完美的解决方案async/await。

使用Fetch&promises实现数据交互(5)
下节课我们就重点说说这个async/await,有同学可能又说了,那老师墨迹个啥,直接讲async/await不就行了,这篇文章我不是白看了?

错!async/await 内部的实现也是Promise,没有这节课的东西,你根本不会明白下节课的东西。

最后一句话,永远不要因为走了太久而忘了为什么出发,更不要因为只盯着目标而忘记了看脚下的路。

                                                ·END·