ES6语法详解（四）

es6语法详解

1)前言

首先设想一个日常开发常常会遇到的需求：在多个接口异步请求数据，然 后利用这些数据来进行一系列的操作。

一般会这样去写:

$.ajax({

url: '......',

//success 是回调函数

success: function (data) {

$.ajax({

// 要在第一个请求成功后才可以执行下一步

url: '......',

success: function (data) {

// ......

}

});

}

});

这样的写法的原理是，当执行一些异步操作时，我们需要知道操作是否已经完成，所有当执行完成的时候会返回一个回调函数，表示操作已经完成。

使用回调函数的形式理解起来并不困难，但是实际的应用当中会有以下的缺点：

1、在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，就是常说的callback hell。(回调黑洞)

2、如果几个异步操作之间并没有前后顺序之分(例如不需要前一个请求的 结果作为后一个请求的参数)时，同样需要等待上一个操作完成再执行 下一个操作。

为了解决上述的问题，promise 对象应运而生，在 emcascript 2015 当中已经成为标准。

2)什么是promise?

一个 promise 对象可以理解为一次将要执行的操作(常常被用于异步操作)，使用了 promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观。而且由于promise.all这样的方法存在，可以让同时执行多个操作变得简单。接下来就来简单介绍 promise 对象。

resolve 和 reject

function helloworld (ready) {

return new promise(function (resolve, reject) {

if (ready) {

resolve("hello world!");

} else {

reject("good bye!");

}

});

}

helloworld(true).then(function (message) {

alert(message);

}, function (error) {

alert(error);

});

上面的代码实现的功能非常简单，helloword函数接受一个参数，如果为true就打印 "hello world!"，如果为false就打印错误的信息。helloword函数返回的是一个 promise对象。

在 promise 对象当中有两个重要方法————resolve和reject。

resolve方法可以使 promise 对象的状态改变成成功，同时传递一个参数用于后续成功后的操作，在这个例子当中就是hello world!字符串。

reject方法则是将 promise 对象的状态改变为失败，同时将错误的信息传递到后续错误处理的操作。

3)promise的三种状态

上面提到了resolve和reject可以改变 promise 对象的状态，那么它究竟有哪些状态呢?

promise 对象有三种状态：

fulfilled 可以理解为成功的状态。

rejected 可以理解为失败的状态。

pending 既不是 fulfilld 也不是 rejected 的状态，可以理解为 promise 对象实例创建时候的初始状态。

helloworld 的例子中的then方法就是根据 promise 对象的状态来确定执行的操作，resolve 时执行第一个函数(onfulfilled)，reject 时执行第二个函数(onrejected)。

4)使用promise处理多任务

printhello(true).then(function(data) {

// console.log(data);

return data;

}).then(function(data) {

return data+"world";

}).then(function(data) {

return data + "!";

}).then(function(data) {

console.log(data);

});

then可以使用链式调用的写法原因在于，每一次执行该方法时总是会 返回一个 promise对象。

另外，在thenonfulfilled 的函数当中的返回值，可以作为后续操作的 参数。

5)catch方法

printhello(false).then(function(data) {

console.log(data);

}).catch(function(data) {

console.log(data);

});

catch方法是then(onfulfilled, onrejected)方法当中onrejected函数的一个简单的写法，也就是说可以写成then(fn).catch(fn)，相当于then(fn).then(null, fn)。使用catch的写法比一般的写法更加清晰明确

6)all和race方法

console.time();

var p1 = new promise(function(resolve) {

settimeout(function() {

resolve("hello");

}, 3000);

});

var p2 = new promise(function(resolve) {

settimeout(function() {

resolve("world");

}, 3000);

})

promise.all([p1, p2]).then(function(result) {

console.log(result);

console.timeend();

});

上面的例子模拟了传输两个数据需要不同的时长，虽然 p2 的速度比 p1 要快，但是promise.all方法会按照数组里面的顺序将结果返回。

日常开发中经常会遇到这样的需求，在不同的接口请求数据然后拼合成自己所需的数据，通常这些接口之间没有关联(例如不需要前一个接口的数据作为后一个接口的参数)，这个时候promise.all方法就可以派上用场了。

还有一个和promise.all相类似的方法promise.race，它同样接收一个数组，不同的是只要该数组中的 promise 对象的状态发生变化(无论是 resolve 还是 reject)该方法都会返回。

二)fetch网络请求

//fetch网络请求

var xhr = new xmlhttprequest();

xhr.open("get", "demo.json", true);

xhr.send();

xhr.onreadystatechange = function(){

if(xhr.readystate == 4 && xhr.status == 200) {

console.log(xhr.responsetext);

}

}

1)get请求

fetch("demo.json").then(function(data) {

return data.json();

console.log(data.json())

}).then(function(data) {

console.log(data);

});

2) post请求

fetch("demo.json", {

method: "post",

mode: 'same-origin',

headers: {

"content-type": "application/x-www-form-urlencoded"

},

body: "a=1&b=2"

}).then(function(data) {

// return data.json();

}).then(function(data) {

// console.log(data);

})