浅谈前端与网络请求

作者：不洗碗工作室 - Michael Code

博客地址：http://michaelcode.cn

版权归作者所有，转载请注明出处

toc: 前端

学前端也有一段时间了，想浅谈一下前端与网络请求。谈网络请求，自然绕不开的一个话题便是 JS。

作为前端三大基础之一的 JavaScript ，其重要性是不言而喻的。

在一位前辈推荐下，机缘巧合遇到了廖雪峰老师的 JavaScript 教程，此教程有哪些好处，我就不废话了，感兴趣的朋友自己去看一下。在一开始看这个教程的过程中，感觉学起来几乎是毫无阻碍的，暗自高兴遇到了福音，直到碰到了这三个词：

JSON、Ajax、Promise

。其实，廖老师的教程中对此三者的详述挺清楚的。然而，对于一个只会用 HTML 和 CSS 写静态页面、从来没接触过异步、网络请求等概念的小白来讲，简直像看到了几个外星文字一样。

为了搞清楚这三个神奇玩意儿的含义以及作用，我开始踏上了疯狂的“百度谷歌之旅”。结果，为了解释这三个词，却又搞出了一大堆更神奇的玩意儿。大致如下：

Fetch、Generator、Thunk、async、await

。其实，如果学完这些的话，你会发现，这些概念其实根本不是平行的，甚至根本不在一个维度上。可是，这些概念对于当时的我来说，却是混杂在一起的一锅粥，越炖越乱。。。越乱。。。乱。。。

后来，在经历了无数痛苦的挣扎之后。我终于能站在这里，把这些概念一点点的拨弄清楚，谈一谈这到底是怎么一回事。而且，我发现，当时不明白这些概念，最大的原因是把它们给割裂开了。所以，这篇文章将会把这些概念串联起来，给你还原一个网络请求的全貌，另外，本文只理思路，不讲细节实现。如果，你跟我当时一样对以上这些概念一头雾水，那么，这篇文章应该是会对你学习有些帮助的，至少会让你不那么想自杀（开个玩笑了哈～）

首先，我先来说一下，前端与网络请求的关系。

如果你是刚开始接触前端，可能你不会了解网络请求相关的东西。可是，你总该听过静态页面和动态页面这两种概念吧，很可能，你听某个前辈讲过，动态页面跟页面上的动态不是一回事。比如说，我的这个博客，虽然你点击一些地方，会有一些动画效果，可它却仍然是个静态页面。那么，啥叫动态页面呢？这就是前端跟网络请求的关系了，如果一个网页在你使用的过程中，向服务器发出了某些网络请求，并接收到了从服务器返回来的数据（当然也可能请求失败），那么，这样的网页才叫做动态页面。也就是说，这里的动态指的是你的浏览器（客户端）和服务器（服务器端）的数据交换。

作为一个真正的前端，所做的事就是负责从客户端获取用户的数据（像是你填写的用户名和密码），然后，把这些数据组织起来，发给服务器端，然后等待服务器端处理完数据（至于服务器接收到数据怎么处理，就是后端大佬的问题了），接收返回的数据，并对这些返回的数据进行不同的处理（比如展示在页面上或者储存起来之类的）。也就是说，写出一个漂亮的页面展示给别人只是前端工作的一部分（一开始，天真的我就以为前端就是写写页面。。。）

接下来，就对上面的几个概念进行挨个解说

搞清楚了前端与网络请求的关系，解释上面的几个看上去玄之又玄概念就容易多了（这些概念基本都是用在上面的过程中）。再墨迹一遍，我这篇里面侧重的是对那些概念的个体理解和把握，并不会具体讲它们的用法。

JSON（用的最广泛，也是最容易理解的一个概念）：首先， JSON 的本质是一种数据的格式，取代的是 XML 。那么，这哥俩的作用是啥呢？其实就是一个传输功能，也就是在咱前边所说的网络请求的传输过程中，数据的格式必须是JSON格式。所以， JSON 不止是前端要用的东西，后端在向前端传输数据的时候，同样也得先把数据格式转化成 JSON 格式，再进行传输。至于为啥要取代以前的 XML 格式，很好理解， JSON 格式简单呗。
AJAX：其实，这四个字母是
Asynchronous JavaScript and XML
的缩写，翻译成中文就是：用JavaScript执行异步网络请求。它的本质就是用来向服务器端发出网络请求的一种方法。作用如上。那么，异步请求又是个啥意思？说白了，就是，在你发出请求后，你仍然能继续去执行后面的代码，而不是干等着，啥也干不了（因为网络请求从发出到收到回应是需要一定时间的，尤其你的网比较渣的时候）。等到服务器端返回的数据到达客户端时，你再停下手头的活，去处理收到的数据。
Promise：前边在 AJax 里说到了异步，而 Promise 就是一种执行异步操作的方式（它在 ES6 里有了规范的用法）。它的好处是啥呢？就是写起来以及处理起来比较方便。当然，异步操作不止在网络请求里用得到，执行起来需要等待一定时间的操作，都可以而且是应该写成异步的操作，比如 Timeout 函数。这样的话，等待时间得到了利用，珍惜时间嘛（当然，大部分情况下是考虑用户体验）。所以，Promise 不只是用在网络请求里，所有用得到异步的地方，它都可以大展身手。
Fetch：这个东西本质上是一种发出网络请求的方法。你传给它一个 JSON 格式的对象、一种请求方法（如GET、POST）以及一个URL，它就会把这个 JSON 对象作为数据，传输给给定的 URL ，等着拿返回的数据。而且，这个神奇的东西在发完请求后，会返给你一个 Promise，这样，你就不必再去额外地写异步了，而是在 Fetch 后边直接跟一个异步的处理（也就是接收到返回的数据该怎么处理）。
Generator： Generator是ES6里面的新东西（其实ES6也不是很新了哈），是一个比较神奇的东西。它本质上来讲，并不是一个函数，但它的执行却跟函数很相似。它就相当于在函数里打了许多断点（yield），执行完一部分就停一下，等待继续执行的命令。基于这样的特性，我们把它的每次执行设置成自动化的，比如，在网络请求中，我们设置接收到返回的数据后，就继续执行下面的操作，这样，就相当于实现了一个网络请求的异步操作。这样的异步操作，往往比较简单方便。
Thunk： Thunk 本质上来讲，是一个函数，用来对异步函数进行封装，只留下一个参数--回调函数。利用 Thunk 函数和 Generator 的结合，我们可以实现上面所说的 Generator 执行异步操作。这也就是 Thunk 函数在网络请求中的作用。
async和await：这两个东西是 ES7 里面的新玩意儿，也是对异步操作的简化。其中的 async 用来标志一个函数，就像 Generator 里的*,而 await 就像 Generator 中的 yield 一样。

至此前端与网络请求的概述以及相关的概念就介绍完了

尽管我已经尽力简化了这些概念的定义，但一口气看完了这么多的概念，估计你还是会有点晕，所以，我在最后再把这些概念串一遍，毕竟，这才是初衷嘛。

前端网络请求的处理过程如下：

首先，利用 fetch（或者原始的 XMLHttpRequest ，这个东西跟 fetch 作用一样）组织要发出的请求，并通过 Promise（或者Generator）（对应 XMLHttpRequest 的是 Ajax ）实现异步，接收到的数据是JSON 格式，然后再利用收到的数据进行进一步处理。

OK，本文到此就正式结束啦。如果你觉得有些头晕迷糊，就缓一缓，再看一遍。或者，闭上眼，在脑海里，想象一遍整个网络请求的过程。当然，读完这篇，你只能理解个大概，具体怎么写，还要去看具体的教程或者文档的哈。

如果，本文帮助到了你，作者会很开心的。当然，你如果给点小费，作者会更开心哟。