async/await分析和实现

如何理解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
  }