2019-09-11 | JavaScript, ES6, 异步

ES6总结（六）

1. 异步

为什么需要异步？
因为js是单线程的，js在一段时间之内只能做一件事。
什么是异步？
在说异步之前，先说一下什么是同步。
同步：一定要等任务执行完了，得到结果，才执行下一个任务。
异步：不等任务执行完，直接执行下一个任务。

2. Promise

去网上可以搜索PromiseA+规范；
Promise是内置的构造函数，用来管理回调Promise函数的（想象成回调函数的状态机）；
使用new Promise()来创建一个Promise对象，需要注意的是Promise有三个状态：pending、resolved成功、rejected失败；
new Promise()括号里面必须传一个函数，并且它会立即执行，执行的同时会传2个参数，一个是resolved，另一个是rejected；

关于成功和失败两个参数的使用

const p = new Promise((resolved,rejected)=>{
	// resolved和rejected都是函数
	// resolved是成功的时候需要调用的函数
	// rejected是失败的时候需要调用的函数
});
// 如果没有调用resolved和rejected时，p是一个pending状态。

注意：pending状态只能变成成功或者pending状态只能变成失败这两种状态的转变；不能成功变成pending或者失败变成pending或者成功和失败之间各自相互转换。

then()方法相当于注册事件。
如：

const p = new Promise((resolved,rejected)=>{ // p在这里相当于是一个占位符
	// 一般就是将异步写在这里面
	resolved(1000);
});
// 注册事件，相当于异步在没有返回值时，就进行一个操作。
//（对未来值进行操作了）
// 注意：当为pending状态时，不会执行下面的两个函数。并且它会返回一个新的Promise对象。
// 还需要注意的一点就是：Promise是可以链式调用的
p.then(function(val){ // 注册成功的事件（成功就执行这个函数）
	console.log(val);
},function(err){ // 注册失败的事件（失败就执行这个函数）
	console.log(err);
});

可以把Promise想象成占位符（对未来值进行操作）。

创建一个已处理的Promise对象。
如：

const p1 = Promise.resolve();
console.log(p1); // 状态是resolved状态
const p2 = Promise.reject();
console.log(p2); // 状态时rejected状态

3. Promise引起的回调地域（也称回调金字塔）问题

其实就是一个链式调用Promise引起的问题。由于它们会返回一个新的Promise对象，因此可以进行链式调用。
下面给大家举一个例子，如下所示：

const p = new Promise((resolved,rejected)=>{
	setTimeout(function(){
		resolved(1000);
	},1000);
});
// 由于p.then返回的是Promise对象。p.then返回的Promise对象，它看回调函数的
// 返回值。如果return值不是Promise对象的话，就是成功状态，如果return是Promise
// 对象的话，状态根据Promise对象的状态走。
p.then(function(val){
	console.log(val);
	// 默认的是return undefined;由于undefined不是Promise对象，所以就是成功状态
},function(err){
	console.log(err);
}).then(function(){
	console.log(111);
},function(){
	console.log(222);
});

// 控制台打印内容
// 1000
// 111

4. 相应对个Promise对象

Promise.all()；
Promise.all()会返回一个新的Promise，因此我们就可以调用then()方法。
如：

function fakeAjax(ms,val){
	return new Promise((resolved,rejected)=>{
		setTimeout(function(){
			resolved(val);
		},ms);
	});
}
var p1 = fakeAjax(1000,10);
var p1 = fakeAjax(2000,20);
var p1 = fakeAjax(1500,30);
// Promise.all()表示当所有请求都成功的话，就走成功的回调函数，
// 如果其中有一个失败的话，我们就走失败的回调函数。
Promise.all([p1,p2,p3]).then(function(val){
	// 请求的时间为它们中最大的时间，即2s之后
	console.log(val); // 打印出来是一个数组，打印出：[10,20,30]
},function(err){
	console.log(err);
});

Promise.race()它会去响应最快的那个请求，不管这个请求是成功了还是失败了。
catch()方法
catch()方法相当于是失败的回调函数，等价于then(null,function(){});