ES6语法详解（四）

一）Promise对象

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 对象。

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

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);
		})