前端异步操作大杂烩（ajax、fetch、promise、async/await）

前端工作中面临两个重要的问题：同步与异步操作。
  同步操作，用户操作即时显示的，比如切换菜单，按钮点击效果等等。
  异步操作，需要和服务器交互，需要一定处理时间的，比如显示查询操作等等。
异步操作主要通过 回调函数实现，所谓的回调就是，“回过头来再调用”，就和你在外面吃饭叫号一样。

一、为什么需要异步操作？

异步操作的主要应用场景有两个：
  1）向后台请求数据
  2）需要复杂的计算
如果所有的操作是同步的，那么就会出现一个很重要的问题，在等待后台服务器传回来的数据和进行复杂计算的时候，用户界面不能进行任何操作，用户处于等待状态，这不利于交互。

二、服务器交互的异步（Ajax---->Promise---->Fetch）

简单来说，需要去后台查询数据库，拿到数据再进行下一步操作。需要注意下面两种情况
  1）不能让用户等待，网络之间传递数据，可能存在网络延迟，数据库操作失败等等意外情况；
  2）不要刷新页面，web的工作原理，一个http请求需要一个页面，如果需要再刷新页面，会打断用户。

2.1 Ajax：

为了上面的两个目的，有大神想出了ajax（Asynchronous JavaScript and XML）——Javascript异步执行网络请求。

ajax代码：
var XHR = new XMLHttpRequest();
XHR.onreadystatechange = function() {
		if (XHR.readyState == 4 && XHR.status == 200) {  //为什么需要两个来判断？如果只使用readystate，如果服务器请求出错，也会返回消息，这不是我们想要的结果，如果只是用状态码判断，那么会响应好几次
		  result = XHR.response;
		  console.log(result);//返回结果通过回调函数
		  }
}
XHR.open('GET', url, true);
XHR.send();//get请求不需要传送数据，post需要传送数据，以字符串或者Formdata的形式传送

上面的操作，对于单个http请求没有什么问题，但是如果我需要根据结果再进行http请求，会发生图片所示