如何理解async
async的原理就是将generator和自动执行函数包装在一个函数里面,generator手动调用next直到return,而async则是自动执行
- async 通过自动执行函数返回的是一个Promise
async function test(){
return Promise.resolve(1)
}
test().then( val => console.log(val) ) // 1
async function testA(){
return 1 //返回的是primitive值,会被自动执行函数包装返回Promise
}
testA().then( val => console.log(val) ) // 1
- async的自动执行函数(auto)实现
// 自动执行函数接受一个generator,递归调用后返回Promise
function autoWrap(genF){
return new Promise((resolve,reject) => {
let gen = genF() //返回一个状态机
function auto(nextF){
let next
try{
next = nextF() // 有可能传进来的函数不对,捕获异常
} catch(e){
reject(e)
}
if(next.done) return resolve(next.value)
Promise
.resolve(value) //递归调用
.then(val => auto(() => gen.next(val))) //上一次的值继续传给下个next
.catch(err => reject(err))
}
auto(() => gen.next())
})
}
- async fn()
async function fn(args){}
// 等价于
function fn(args){
return autoWrap(function * (){})
}
fn() // 执行完返回的是一个promise
await
- await只能在async中使用,对Promise求值
async function log(){
return 1
}
async function test(){
log().then(res => console.log(`then方式:${res}`) )
console.log(`await方式:${await log()}`)
}
test()
// then方式:1
// await方式:1
- dispatch
function dispatch(action) {
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}
// 判断 action 是否有 type{必须} 属性
if (typeof action.type === 'undefined') {
throw new Error(
'Actions may not have an undefined "type" property. ' +
'Have you misspelled a constant?'
)
}
// 如果正在 dispatch 则抛出错误
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
// 对抛出 error 的兼容,但是无论如何都会继续执行 isDispatching = false 的操作
try {
isDispatching = true
// 使用 currentReducer 来操作传入 当前状态和action,放回处理后的状态
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}
var listeners = currentListeners = nextListeners
for (var i = 0; i < listeners.length; i++) {
var listener = listeners[i]
listener()
}
return action
}