【今日前端】callback、promise和async await 区别

callback、promise和async await 区别

callback????
- callback到回调地狱
promise链式编程????????
Generator????
async await ????
- 了解再多一点
借鉴????

callback????

callback 顾名思义回调，不禁让人想起回调地狱。

什么是回调????

function say(value){
	console.log(calue)
}
function execute(func, val){
	func(val)
}
execute(say, 'hello world')

代码中say这个函数就是回调函数 ????被当作参数使用的函数就叫做回调函数。

callback到回调地狱

ajax请求中就包含回调函数，又是较为常用的请求，新手常在业务中形成回调地狱。

举例来说，开发中有多个请求，每个ajax请求依赖上一次的循环，新手可能如下使用回调嵌套????

$.ajax({ 
	url: "request1",
	success: function(){
        $.ajax({ 
			url: "request2",
			success: function(){
		        $.ajax({ 
					url: "request2",
					success: function(){}
			 	});
	   		}
	 	});
  	}
});

❗❗❗深层次的回调函数，就会形成回调地狱。
????ES6引入了promise,每个函数不需要知道下个执行函数转到哪里。

promise链式编程????????

让我们使用promise对上面的业务进行改写

function request(url){
	return new Promise((resolve, reject) => {
		$.ajax({ 
			url: url,
			success: () => {
				resolve(url)
			}
	 	});
	})
}
request('request1').then(request('request2')).then(request('request3'))

promise 虽然好，但是仍有一些浏览器不支持！????️‍不要看了，就是你????IE。

如果要在IE中使用，需要引入polyfill

promise 链式编程遇上try/catch

try{
	request('request1').then(res => {
		//  可能会有错
		const data = JSON.parse(res)
		console.log(data)
	}).catch(err => console.log('promise err', err))
} catch(err) {
	console.log('try catch', err)
}

注意: try…catch可以捕获promise异常吗?
不能，try…catch 主要用于捕获异常，这里的异常，是指同步函数的异常。

输出结果 promise err

Generator????

看见promise的链式编程后，发现过多的使用.then也会造成我们流程执行不明确的问题。所以我们的主角登场了。????????Generator 生成器

Generator（生成器）是一种有效利用内存的机制，一边循环一边计算生成数值的机制。通过配合Promise可以更加优雅的写异步代码。
接下来，让我们试试✍

构建生成器函数

function *requestCreate(url){
	let result = yield request(url)
	console.log("hello world")
}

在函数前面加个*,他就是个生成器函数
yield类似于return 也是返回值，区别在于当程序执行到yield后，会返回yield后面的表达式，并且程序暂停在这里保存当前值的状态，程序的暂停并不是中止????‍

获取生成器的值

var it = requestCreate('request1')
it.next().value.then(data => console.log(data))
console.log(123)
ite.next()
console.log(it.next())

next()可以获取yield第一次暂停的值返回的{value: 值， done: true}, value表示yield返回的值，done表示是否迭代完毕。当然也可以使用next(10)来给yield设置下次执行的值。

123
hello world
request1

async await ????

语法的难以理解，使得 ES7推出了async/await（异步等待）

async function requestCreateAsync(url){
	let result = await request(url)
	return result
	console.log("hello world")
}

函数前面加async表示该函数是一个异步函数 await表示等待一个异步值的到来。
async await使得异步代码看起来像同步代码，这正是他的魅力所在！????

了解再多一点

async await原理是生成器， async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，参照 Generator 封装的一套异步处理方案，可以理解为 Generator 的语法糖，而 Generator 又依赖于迭代器Iterator，而 Iterator 的思想又来源于单向链表。
async，await结合使得try，catch可以捕获异常

借鉴????

浅谈js中的回调地狱问题

秒客网