js的async/await与普通的promise和ajax对比

对于一般人的阅读习惯，都是喜欢从上到下阅读代码。

async的优点在于能把异步的代码当作同步的代码阅读

举个例子

你是比较喜欢这样

if() {

  if() {

    if() ｛

   ｝

｝

}

还是喜欢这样呢？

if () {}

if () {}

喜欢哪一种纯属个人习惯

async还有一个优点是准时，在以前的ajax版本中，当多个ajax同时进行的时候(不包括循环异步任务)，返回的结果是根据网络速度

而async能够实现多个异步的时候按照上下文顺序来执行。

下来来几段过去使用过的例子：

 

	/* 旧版ajax start*/
	$.ajax({
		url: './async.php',
		success(data) {
			console.log('2')
			$.ajax({
				url: './async.php',
				success(data) {
					console.log('3')
				}
			})
		}
	})
	console.log('1')
	/* 旧版ajax end*/

	/* 普通ajax start */
	$.ajax({
		url: './async.php'
	}).done(function(data) {
		console.log(data)
	}).fail(function(data) {
		console.log(data)
	}).then(function(data) {
		console.log('2')
		$.ajax({
			url: './async.php'
		}).done(function(data) {
			console.log(data)
		}).fail(function(data) {
			console.log(data)
		}).then(function(data) {
			console.log('3')
			console.log(data)
		});
	});
	console.log('1')
	/* 普通ajax end */

	/* 普通Promise start */
	new Promise(function(resolve, reject) {
		$.ajax({
			url: './async.php'
		}).done(function(data) {
			resolve(data)
		}).fail(function(data) {
			reject(data)
		})			
	}).then(function(data) {
		console.log('2');
		new Promise(function(resolve, reject) {
			$.ajax({
				url: './async.php'
			}).done(function(data) {
				resolve(data)
			}).fail(function(data) {
				reject(data)
			})
		}).then(function(data) {
			console.log('3')
		})
	})
	console.log('1');
	/* 普通Promise end */

	/* async/await start */
	async function ajax() {
		var data = await new Promise(function(resolve, reject) {
			$.ajax({
				url: './async.php'
			}).done(function(data) {
				resolve(data)
			}).fail(function(data) {
				reject(data)
			})			
		}).then(res => {
            return res
        });
		console.log('2');
		var data2 = await new Promise(function(resolve, reject) {
			$.ajax({
				url: './async.php'
			}).done(function(data) {
				resolve(data)
			}).fail(function(data) {
				reject(data)
			})			
		}).then(res => {
            return res
        });		
		console.log('3');
		console.log('看上去同步的异步, 本质还是异步,对比以前的写法少了很多嵌套，而是从上到下')
	}
	ajax() // 先执行异步
	console.log(1);
	/* async/await end */