这篇可能会挺短的,因为我不会讲Thunk函数、co模块,因为我对二者很不熟悉,也不敢乱说,也没什么感悟,所以我会记录下异步相关的基本概念和我本人对Generator在异步应用上的作用。
一、基本概念
我们知道Javascript语言的执行环境是单线程的,所以异步操作势在必行,不然就无法运行,卡死不可。
1、异步
所谓异步就是将任务分成两块,资源按需分配。比如我们有一个删除人员的功能按钮,当我们点击删除时,会对应删除所选行,那么整个任务将会分成两部分。一部分是点击删除,发送删除请求;第二部分是返回删除后的数据列后续操作。那么就意味着,我们点击删除按钮,js会发送这个请求后就释放资源,等到返回数据列过来后才会重新开启这个任务的第二部分,从而结束任务。
2、回调函数
想想那上述的第二部分中的具体操作业务逻辑该写在哪里呢?
这就是回调函数的作用,我们知道回调函数有三大特点:你编写的逻辑业务、你没有调用它、最后它执行了;想想到底是什么来触发它执行的呢?那就是你第一部分的请求所产生的第二部分所需的资源【可能是你请求的数据或则你要操作的DOM节点】。所以回调函数里面存在的一般是异步任务的第二部分。
3、Promise对象
根据介绍Promise的那篇博文也可以知晓,它是一个包装异步操作的容器,并且将请求后的回掉函数提炼到了外部。
二、Generator函数的异步应用
我们知道Gnenrator函数有两个特点:暂停性、恢复执行性。所以我们可以利用这两个特点配合Promise对象来封装异步请求操作。比如:
const url = 'http://xxxx/xxx'
const fetch = url => {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
success: data => {
return resolve('success')
},
error: err => {
return reject('failure')
},
})
})
}
const manageFetch = function* () {
const result = yield fetch(url) // 返回一个对象,value属性为Promise对象
console.log('对返回数据操作', result)
}
const manageActive = manageFetch()
// 若从Generator函数manageFetch中传入的Promise对象为何种状态
// 最终从.then或则.catch所返回的Promise对象对应的.then函数中将data值返回给Generator函数manageFetch中的result值
manageActive.next().value.then(data => data).catch(data => data).then(data => {
manageActive.next(data)
})
// 最终结果:打印 “对返回数据操作 failure”