ES6中的Promise和Fetch

2018-01-24 张子阳分类: Web前端

JavaScript是单线程执行的，因此，为了避免操作时的页面中断（体现为页面假死），可以使用回调函数。但是如果回调函数中仍然嵌套有回调函数，代码就会变得越来越不可维护。这篇文章介绍ES6如何通过Promise解决这个问题，并介绍了相关的Fetch方法。

回调地狱Callback hell

假设有一个服务接口，接受两个操作数，可以完成相加的操作，并以Json字符串返回结果。返回的结果结构如下：

{ Data: 3, // 计算结果 IsSuccess: true, // 是否成功 Message: "", // 错误消息 State:0 // 执行的结果状态 }

本例中仅需要关注Data，其他3个值总是正确的。

那么，当要完成1+2+3+4这个操作时，如果采用传统的方式，代码可能是这样的：

http://test.tracefact.net/compute/add接口是真实存在并且可以被调用的。

可以看到，success回调函数调用了3次，嵌套了2层。简单起见，没有传入err回调函数。可以通过将url修改为错误的，或者将x传入字符串来制造错误，这里就不演示了。

使用Promise

ES6引入了Promise来解决这个问题，简单来说，Promise将一层套一层的的回调，改成链式操作。

Promise共有三种状态：pending（初始状态，既不是成功，也不是失败状态）、fulfilled（意味着操作成功完成）、rejected（意味着操作失败）。

Promimse的构造函数接受一个函数，这个函数的两个参数分别称作resolve方法和reject方法。当任务成功时，调用resolve()方法，失败时，调用reject()方法。调用resolve和reject时，传入的值，将作为输入参数，传递到then方法的resolve和reject中。

在Promise对象上可以调用then()方法，它也接受两个方法，一个是resolve，一个是reject。then()方法返回的还是一个Promise对象，因此支持链式调用。值得注意的是：then方法中上一个resolve方法的返回值，将成为下一个then方法中resolve的输入参数。由此构成了数据的流动。

上面两段话如果不结合代码，很难理解清楚，我们继续看1+2+3+4这个例子，为了简单起见，先不使用post方法异步操作。

var p = new Promise(function(resolve, reject){ var x = 1, y =2; resolve(x+y); // 传入结果3 });

以上代码是立即执行的，仅仅完成了1+2。那么如何利用这个计算结果完成下一步+3的操作呢？可以通过then方法。

var p = new Promise(function(resolve, reject){ var x = 1, y =2; resolve(x+y); }); p.then(function(z){ // 这里z是上一步的计算结果3 var y = 3; return z+y; // 6 })

类似地，完成+4操作，只需要再then一次就可以了。

p.then(function(z){ var y = 3; return z+y; // 6 }).then(function(z){ var y = 4; return z+y; // 10 })

接下来，我们改下post的例子，将它变成Promise版本的。

reject和异常处理

resolve用来处理正常流程，reject则用来处理失败的情况，用法和resolve是类似的，例如下面，我们将x的参数改为“s”，服务端将会返回400 bad request，此时可以添加then的第二个参数reject进行处理：

除了使用reject，还有一种方式，就是使用catch方法，示例如下：

p.then(function(z){ return new Promise(function(resolve, reject){ post("http://test.tracefact.net/compute/add", {x:z, y:3}, function(res){ res = JSON.parse(res); console.log("step2: ", res); resolve(res.Data); // 6 }); }); }).catch(function(msg){ alert("step2: " + msg) });

一般来说，使用catch会更简单清晰一些。

fetch方法

在过去，因为缺乏统一的标准，发起ajax异步请求，在不同的浏览器下有不同的方式，主要是使用XMLHttpRequest对象和ActiveXObject("Msxml2.XMLHTTP")。在ES6中，提供了fetch方法简化了这一操作。除此以外，fetch方法返回的是一个Promise对象，因此，可以链式发起异步请求。而服务端的返回值则通过response对象传递。

再次改写上面的例子：

fetch("http://test.tracefact.net/compute/add", { method:"POST", headers:{ "Content-Type": "application/json" }, body: JSON.stringify({x:1, y:2}) }).then(function(res){ return res.json(); }).then(function(res){ return fetch("http://test.tracefact.net/compute/add", { method:"POST", headers:{ "Content-Type": "application/json" }, body: JSON.stringify({x:res.Data, y:3}) }) }).then(function(res){ return res.json(); }).then(function(res){ console.log(res.Data); }).catch(function(err){ alert("err: " + err); });

使用fetch时第一步then返回的response对象（res），和直接使用前面post方法返回的res并不是同一个对象。这个对象的详细内容可以参考这里：https://developer.mozilla.org/zh-CN/docs/Web/API/Response。在这个response上调用json()方法，返回的也是一个Promise，然后再下一步then才能够获得服务器返回的原始对象。

总结

这篇文章主要讲述了ES6中的Promise对象和Fetch方法，上面的代码，无需Babel就可以在新版本Chrome浏览器下直接运行，建议想要熟悉的朋友们敲一遍代码，执行一遍以加深理解。

感谢阅读，希望这篇文章能给你带来帮助！