Javascript 同步和异步，ajax/promise/async+await的理解

同步和异步

什么是同步

意思大概就是执行完一步后再执行下一步（执行队列依次执行），如：
console.log(1);
console.log(2);
console.log(3);
=> 1
=> 2
=> 3

什么是异步

意思就是下一步无需等上一步完结后再执行，就如下一步可以独立新队列自己执行而不同等待上一步完结
console.log(1);
setTimeout(()=>{console.log(2);},200);
console.log(3);
=> 1
=> 3
=> 2
而不是
=> 1
=> 2
=> 3

ajax

console.log(1);
$.ajax({		//Jquery 的异步请求
	type:'get',
	url:'.......',
	success:(data) => {
		console.log(data)
	}
});
console.log(2);

=> 1
=> 2
=> data

promise

是一个异步编程的解决方案，比传统的解决方案 - 回调该函数和事件 - 更合理且更加强大
	它有三个状态
			- pending [待定] 初始状态
			- fulfilled [实现] 操作成功
			- rejected [拒绝] 操作失败
var promise = new Promise(传一个函数)；

当 promise 状态发生改变，就会触发 then() 里的响应函数处理后续逻辑
	当状态改变，只有两种可能：
		从 pending => fulfilled 
		从 pending => rejected 

var promise = new Promise((resolve,reject) =>{
	if(false){
			resolve(' success ')
	}else{
			reject(' fail ')
	}
});

promise.then( res => {
	console.log(res)		/ / resolve(' success ') 		成功
} ).catch( err => {
	console.log(err)		/ / reject(' fail ')		失败
} )

Promise.all

把多个 Promise 实力打包成一个新实例，成功则返回一个结果数组，失败则返回最先 Reject 失败的状态
		返回结果 = 全部都返回了
let promise1 = new Promise( (res,rej) => {
	resolve('成功了');
} );
let promise2 = new Promise( (res,rej) => {
	resolve('success');
} );
let promise3 = Promise.reject('失败')

Promise.all( [ promise1 , promise2 ] ),then( res => {
		console.log(res)		//['成功'，‘success’]
} ).catch( err => {
		console.log(err)		
} );
Promise.all( [ promise1 , promise3 , promise2 ] ),then( res => {
		console.log(res)		//
} ).catch( err => {
		console.log(err)		// '失败'
} );

Promise.race

把多个 Promise 实力打包成一个新实例，返回的结果就是所有请求中最快的返回结果（不论成功还是失败的结果）
		返回结果 = 最快返回结果的
		
let promise1 = new Promise( (res,rej) => {
		setTimeout( () => {
			resolve('success');
		},1000 )
} );
let promise2 = new Promise( (res,rej) => {
		setTimeout( () => {
			reject('失败了');
		},500 )
} );

Promise.all( [ promise1 , promise2 ] ),then( res => {
		console.log(res)		
} ).catch( err => {
		console.log(err)		// '失败了'
} );

Async/await

用来处理异步的，其实是 Generator 函数的改进，背后原理就是 Promise

async function f1(){
	return "abc";
	//自动打包成Promise对象
	//与下面两个方式同等
	//return Promise.resolve('abc')
	//return new Promise( res => { resolve('abc') } );
}

配合 await

await	//会阻塞后面的逻辑代码，等主程序执行后，再执行后面的逻辑代码

async function f1(){
	setTimeout( ()=>{
		return "f1";
	},2000);
}
function f2(){
	return "f2";
}
async function f3(){
	let a = await f1();
	//只有等待f1执行完后，才能执行以下代码
	let b = await f2();
	console.log(a,c);
}
=> f1
=> f2

Promise.reject

async function f1(){
	return Promise.reject('ccc')
}
async function f3(){
	//let a = await f1();
	//只要遇到 reject 后面代码不执行
	//let b = await f2();
	//console.log(a,c);
	//使用：
	try {
		let a = await f1();
	} catch(e) {
		console.log(e)
	}
}