ES5中的Generator异步方案
Generator使用
function* foo() {
console.log('start')
try {
const res = yield 'foo'
console.log(res) // bar
} catch (e) {
console.log(e)
}
}
const generator = foo()
const res = generator.next()
console.log(res) // Object { value: "foo", done: false }
generator.next('bar')
// generator.throw(new Error('error'))
Gernerator配合Promise的异步方案
- 基本实现
function* main() {
const users = yield fetch('https://jsonplaceholder.typicode.com/users')
console.log('users', users)
const posts = yield fetch('https://jsonplaceholder.typicode.com/posts')
console.log('posts', posts)
}
const g = main()
const res = g.next()
res.value.then(data => {
const res2 = g.next(data) // data: users
if (res2.done) return
res2.value.then(data => {
const res3 = g.next(data) // data: posts
})
})
- 封装成co函数
function* main() {
try {
const users = yield fetch('https://jsonplaceholder.typicode.com/users')
console.log('users', users)
const posts = yield fetch('https://jsonplaceholder.typicode.com/posts')
console.log('posts', posts)
const e = yield fetch('https://helloworld')
console.log('e', e)
} catch (e) {
console.log('error', e)
}
}
const co = generator => {
const g = generator()
const handleResult = result => {
if (result.done) return
result.value.then(
data => {
handleResult(g.next(data))
},
error => g.throw(error)
)
}
handleResult(g.next())
}
co(main)
ES6中的async, await语法糖
async function main() {
try {
const users = await fetch('https://jsonplaceholder.typicode.com/users')
console.log('users', users)
const posts = await fetch('https://jsonplaceholder.typicode.com/posts')
console.log('posts', posts)
} catch (e) {
console.log('error', e)
}
}
const promise = main()
promise.then(() => {
console.log('all done')
})
手写Promise
核心逻辑实现
const PENDING = 'pending' // 等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' // 失败
const resolvePromise = (promise, x, resolve, reject) => {
if (promise === x) {
// 防止自己返回自己
return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
if (x instanceof MyPromise) {
// promise 对象
x.then(resolve, reject)
} else {
// 普通值
resolve(x)
}
}
class MyPromise {
constructor(executor) {
try {
executor(this.resolve, this.reject)
} catch (e) {
this.reject(e)
}
}
status = PENDING
value = undefined
reason = undefined
successCallback = []
failCallback = []
resolve = value => {
if (this.status !== PENDING) return // 状态一旦改变就不能再更改
this.status = FULFILLED
this.value = value
// 判断成功回调是否存在,存在就调用
while (this.successCallback.length) this.successCallback.shift()()
}
reject = reason => {
if (this.status !== PENDING) return
this.status = REJECTED
this.reason = reason
// 判断失败回调是否存在,存在就调用
while (this.failCallback.length) this.failCallback.shift()()
}
then = (successCallback, failCallback) => {
successCallback = successCallback ? successCallback : value => value
failCallback = failCallback
? failCallback
: reason => {
throw reason
}
let promise = new MyPromise((resolve, reject) => {
if (this.status === FULFILLED) {
// 成功
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise, x, resolve, reject) // 实现then方法的链式调用
} catch (e) {
reject(e)
}
}, 0)
} else if (this.status === REJECTED) {
// 失败
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise, x, resolve, reject) // 实现then方法的链式调用
} catch (e) {
reject(e)
}
}, 0)
} else {
// 异步等待
this.successCallback.push(() => {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise, x, resolve, reject) // 实现then方法的链式调用
} catch (e) {
reject(e)
}
}, 0)
})
this.failCallback.push(() => {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise, x, resolve, reject) // 实现then方法的链式调用
} catch (e) {
reject(e)
}
}, 0)
})
}
})
return promise
}
}
let promise = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve('成功')
}, 2000)
// resolve('成功')
// reject('失败')
})
promise
.then()
.then()
.then(value => {
console.log(value)
return 'aaa'
})
.then(value => {
console.log(value)
})
Promise.all的实现
static all = array => {
let result = []
let index = 0
return new MyPromise((resolve, reject) => {
function addData(key, value) {
result[key] = value
index++
if (index === array.length) {
resolve(result)
}
}
for (let i = 0; i < array.length; i++) {
let current = array[i]
if (current instanceof MyPromise) {
// promise 对象
current.then(
value => addData(i, value),
reason => reject(reason)
)
} else {
// 普通值
addData(i, array[i])
}
}
})
}
Promise.resolve的实现
static resolve = value => {
if (value instanceof MyPromise) return value
return new MyPromise(resolve => resolve(value))
}
.finally、.catch方法的实现
finally = callback => {
return this.then(
value => {
return MyPromise.resolve(callback()).then(() => value)
},
reason => {
return MyPromise.resolve(callback()).then(() => {
throw reason
})
}
)
}
catch = failCallback => {
return this.then(undefined, failCallback)
}
标签:异步,resolve,const,log,编程,value,JS,reject,console
From: https://www.cnblogs.com/19BigData/p/17509200.html