JavaScript 之异步请求

时间 2019-11-29

原文原文链接

1、

一、异步（async）

异步，它的孪生兄弟--同步（Synchronous）,"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，而后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的.javascript

"异步模式"则彻底不一样，每个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，因此程序的执行顺序与任务的排列顺序是不一致的、异步的。 "异步模式"很是重要。在浏览器端，耗时很长的操做都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操做。就如今来讲应该没有什么后台服务器仍是同步操做了...html

用最直观的代码来体现：前端

 1 <body>
 2 <button id="Button">展现异步操做</button>
 3 <script>
 4 var Button=document.getElementById('Button');
 5 Button.onclick=function(){
 6 alert('展现异步操做--a');
 7 }
 8 alert('展现异步操做--b');
 9 </script>
10 </body>

这个简单的例子就体现出了异步和同步的区别了：java

咱们日常写的代码，都是从上到下来执行的，通常上面的语句尚未执行结束的状况下，下面的语句是不会执行的，可是这段代码咱们很容易测试出：先弹出b窗口，当你点击按钮的时候才开始弹出a窗口。这就是典型的异步操做，不用等把上面的语句所有执行完才开始执行下面的语句。jquery

二、Promise

Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程，可是若是出现多层回调嵌套，也就是咱们常说的厄运的回调金字塔(Pyramid of Doom)，绝对是一种糟糕的编程体验。因而便有了 CommonJS 的 Promises/A 规范，用于解决回调金字塔问题。本文先介绍 Promises 相关规范，而后再经过解读一个迷你的 Promises 以加深理解。程序员

什么是 Promise

一个 Promise 对象表明一个目前还不可用，可是在将来的某个时间点能够被解析的值。它容许你以一种同步的方式编写异步代码。例如，若是你想要使用 Promise API 异步调用一个远程的服务器，你须要建立一个表明数据将会在将来由 Web 服务返回的 Promise 对象。惟一的问题是目前数据还不可用。当请求完成并从服务器返回时数据将变为可用数据。在此期间，Promise 对象将扮演一个真实数据的代理角色。接下来，你能够在 Promise 对象上绑定一个回调函数，一旦真实数据变得可用这个回调函数将会被调用。ajax

Promise 对象曾经以多种形式存在于许多语言中。算法

去除厄运的回调金字塔(Pyramid of Doom)

Javascript 中最多见的反模式作法是回调内部再嵌套回调。编程

 1 // 回调金字塔
 2 asyncOperation(function(data){
 3   // 处理 `data`
 4   anotherAsync(function(data2){
 5       // 处理 `data2`
 6       yetAnotherAsync(function(){
 7           // 完成
 8       });
 9   });
10 });

引入 Promises 以后的代码api

 1 promiseSomething()
 2 .then(function(data){
 3     // 处理 `data`
 4     return anotherAsync();
 5 })
 6 .then(function(data2){
 7     // 处理 `data2`
 8     return yetAnotherAsync();
 9 })
10 .then(function(){
11     // 完成
12 });

Promises 将嵌套的 callback，改形成一系列的.then的连缀调用，去除了层层缩进的糟糕代码风格。Promises 不是一种解决具体问题的算法，而已一种更好的代码组织模式。接受新的组织模式同时，也逐渐以全新的视角来理解异步调用。

三、Fetch API

Fetch API 提供了一个获取资源的接口（包括跨域）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。

Fetch 提供了对 Request 和 Response （以及其余与网络请求有关的）对象的通用定义。使之从此能够被使用到更多地应用场景中：不管是service workers、Cache API、又或者是其余处理请求和响应的方式，甚至是任何一种须要你本身在程序中生成响应的方式。

它还提供了一种定义，将 CORS 和 HTTP 原生的头信息结合起来，取代了原来那种分离的定义。

四、闭包（closure）

闭包和词法做用域很是相近。一个关于闭包如何工做的更好或者更实际的例子就是返回一个函数的引用。

咱们能够返回域中的东西，使得它们能够被其父域所用。

当你在函数里声明一个变量时，你只能在函数内访问。这些变量的做用域就被限制在函数里了。

若是你在一个函数内又定义了内部函数，那么这个内部函数就被称做闭包。它仍能够访问外部函数的做用域。

2、

在开发过程当中,咱们向服务端发送请求,通常会使用三种方式, XMLHttpRequest(XHR)，Fetch ，jQuery实现的AJAX。
其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API，jquery的ajax实际上是封装了XHR。
这里咱们主要比较一下Fetch与XHR在异步请求中的使用示例。

XMLHttpRequest

 1 var xhr;
 2 if (window.XMLHttpRequest) {　 // Mozilla, Safari...
 3   　xhr = new XMLHttpRequest();
 4 } else if (window.ActiveXObject) { // IE
 5   　try {
 6     　xhr = new ActiveXObject('Msxml2.XMLHTTP');
 7  　 } catch (e) {
 8   　  try {
 9     　  xhr = new ActiveXObject('Microsoft.XMLHTTP');
10    　 } catch (e) {}
11  　 }
12 }
13 if (xhr) {
14   　xhr.onreadystatechange = onReadyStateChange;
15  　 xhr.open('POST', '/api', true);
16  　 // 设置 Content-Type 为 application/x-www-form-urlencoded
17  　 // 以表单的形式传递数据
18   　xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
19  　 xhr.send('username=admin&password=root');
20 }
21 
22 // onreadystatechange 方法
23 function onReadyStateChange() {
24  　 // 该函数会被调用四次
25   　console.log(xhr.readyState);
26   　if (xhr.readyState === 4) {
27    　　 // everything is good, the response is received
28     　　if (xhr.status === 200) {
29       　　　console.log(xhr.responseText);
30     　　} else {
31       　　　console.log('There was a problem with the request.');
32    　　 }
33   　} else {
34     　　// still not ready
35     　　console.log('still not ready...');
36   　}
37 }

从上边的代码能够看出，XMLHttpRequest 是一个很是粗糙的API，不符合关注分离的原则，配置和调用方式很是混乱，前端程序员们不只要作各个浏览器的兼容性，还饱受回调地狱的折磨，这显然不是一个好的选择。

Fetch

1 fetch(...).then(fun2)
2           .then(fun3) //各依赖有序执行
3           .....
4           .catch(fun)

从上边的代码能够看出，fetch解决了回调地狱问题，使用简便，虽然仍是有Callback的影子，可是看起来舒服多了。

Fetch 优势：

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用isomorphic-fetch

Fetch和xhr的不一样
一、fetch虽然底层，可是仍是缺乏一些经常使用xhr有的方法，好比可以取消请求（abort）方法
二、fetch在服务器返回4xx、5xx时是不会抛出错误的，这里须要手动经过，经过response中的ok字段和status字段来判断

---------------------

部份内容摘自网络：

https://www.jianshu.com/p/35123b048e5e

http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

JavaScript 之 异步请求

1、