写在前面的话
前端工作中面临两个重要的问题:同步与异步操作。
同步操作,用户操作即时显示的,比如切换菜单,按钮点击效果等等。
异步操作,需要和服务器交互,需要一定处理时间的,比如显示查询操作等等。
异步操作主要通过 回调函数实现,所谓的回调就是,“回过头来再调用”,就和你在外面吃饭叫号一样。
一、为什么需要异步操作?
异步操作的主要应用场景有两个:
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请求,会发生图片所示