Generator 异步方案(生成器函数->Es2015提供)
// 生成器函数回顾
function * () {
console.log('start')
try {
const res = yield 'foo'
console.log(res)
} catch (e) {
console.log(e)
}
}
const generator = foo()
const result = generator.next()
console.log(result)
// generator.next('bar')
generator.throw(new Error('Generator error'))
体验Generator函数异步方案(配合 Promise 的异步方案)
function * main () {
try{
const users = yield ajax('/api/users.json')
console.log(users)
const posts = yield ajax('/api/posts.json')
console.log(posts)
const users1= yield ajax('/api/users1.json')
console.log(users1)
} catch(e) {
console.log(e)
}
}
const g = main()
// 递归
function handleResult (result) {
if(result.done) return // 生成器函数结束
result.value.then(data => {
handleResult(g.next(data))
}, error => {
g.throw(error)
})
}
handleResult(g.next())
const result = g.next()
result.value.then(data => {
const result2 = g.next(data)
if(result2.done) return
result2.value.then(data => {
const result3 = g.next(data)
if(result3.done) return
result3.value.then(data => {
g.next(data)
})
})
})
// 封装(简化生成器函数)(Async/Await没出来之前)
function co (generator) {
const g = main()
function handleResult (result) {
if(result.done) return // 生成器函数结束
result.value.then(data => {
handleResult(g.next(data))
}, error => {
g.throw(error)
})
}
handleResult(g.next())
}
co(main)
Async/Await语法糖(语言层面的异步编程标准)
async function main () {
try{
const users = await ajax('/api/users.json')
console.log(users)
const posts = await ajax('/api/posts.json')
console.log(posts)
const users1= await ajax('/api/users1.json')
console.log(users1)
} catch(e) {
console.log(e)
}
}
const promise = main()
promise.then(() => {
console.log('all completed')
})
// 纯代码,后面会出一篇generator异步详解