JavaScript 基于生成器的异步编程方案相关代码分享
基本的生成器
// 定义生成器函数
function * foo(){
console.log("start")
}
// 创建生成器
const generator = foo()
// 调用生成器
generator.next()
生成器的返回值
// 定义生成器函数
function* foo() {
console.log("start")
// 通过 yield 返回内容
yield "mara"
}
// 创建生成器
const generator = foo()
// 调用生成器
const result = generator.next()
console.log("result=", result)
生成器的参数
// 定义生成器函数
function* foo() {
console.log("start")
// 通过 yield 返回内容
const arg = yield "mara"
console.log("arg = ", arg)
}
// 创建生成器
const generator = foo()
// 调用生成器
const result = generator.next()
console.log("result=", result)
// 再调用一次,才能执行到 yield 之后
generator.next("hello")
生成器结合 ajax 使用
// 模拟 ajax 方法
function ajax(url) {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.responseType = "json"
xhr.onload = function () {
if (this.status === 200) {
resolve(this.response)
} else {
reject(new Error(this.statusText))
}
}
xhr.send()
})
}
// 定义生成器函数
function* userRequest() {
const users = yield ajax("/users.json")
console.log(users)
}
// 创建生成器
const generator = userRequest()
// 调用生成器
const result = generator.next()
// 进行处理
result.value.then(data => generator.next(data))
多个 ajax 请求
// 模拟 ajax 方法
function ajax(url) {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.responseType = "json"
xhr.onload = function () {
if (this.status === 200) {
resolve(this.response)
} else {
reject(new Error(this.statusText))
}
}
xhr.send()
})
}
// 定义生成器函数
function* userRequest() {
const users = yield ajax("/users.json")
console.log(users)
// 继续发请求
const urls = yield ajax("/urls.json")
console.log(urls)
}
// 创建生成器
const generator = userRequest()
// 调用生成器
let result = generator.next()
// 进行处理
result.value.then(data => {
if (data.done) return
result = generator.next(data)
if (result.done) return;
result.value.then(data=>{
if (data.done) return
generator.next()
})
})
错误处理
// 模拟 ajax 方法
function ajax(url) {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.responseType = "json"
xhr.onload = function () {
if (this.status === 200) {
resolve(this.response)
} else {
reject(new Error(this.statusText))
}
}
xhr.send()
})
}
// 定义生成器函数
function* userRequest() {
const users = yield ajax("/users.json")
console.log(users)
// 继续发请求
const urls = yield ajax("/urls.json")
console.log(urls)
// 发送一个错误的请求
try{
const mockError = yield ajax("/urls333.json")
console.log("mockError", mockError)
}catch (e){
console.log("xxx", e)
}
}
// 创建生成器
const generator = userRequest()
// 调度方法
function handleResult(result) {
if (result.done) return
result.value.then(data => {
handleResult(generator.next(data))
}).catch(err => generator.throw(err))
}
// 执行调度
handleResult(generator.next())
封装通用的执行器方法
// 模拟 ajax 方法
function ajax(url) {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.responseType = "json"
xhr.onload = function () {
if (this.status === 200) {
resolve(this.response)
} else {
reject(new Error(this.statusText))
}
}
xhr.send()
})
}
// 定义生成器函数
function* userRequest() {
const users = yield ajax("/users.json")
console.log(users)
// 继续发请求
const urls = yield ajax("/urls.json")
console.log(urls)
// 发送一个错误的请求
try{
const mockError = yield ajax("/urls333.json")
console.log("mockError", mockError)
}catch (e){
console.log("xxx", e)
}
}
// 通用的执行器
function co(generator){
// 创建生成器
const g = generator()
// 调度方法
function handleResult(result) {
if (result.done) return
result.value.then(data => {
handleResult(g.next(data))
}).catch(err => g.throw(err))
}
// 执行调度
handleResult(g.next())
}
// 调用通用的执行器
co(userRequest)
使用 async 和 await 语法糖
// 模拟 ajax 方法
function ajax(url) {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.responseType = "json"
xhr.onload = function () {
if (this.status === 200) {
resolve(this.response)
} else {
reject(new Error(this.statusText))
}
}
xhr.send()
})
}
// 异步方法
async function userRequest() {
const users = await ajax("/users.json")
console.log(users)
// 继续发请求
const urls = await ajax("/urls.json")
console.log(urls)
// 发送一个错误的请求
try {
const mockError = await ajax("/urls333.json")
console.log("mockError", mockError)
} catch (e) {
console.log("xxx", e)
}
}
userRequest().then(resp => console.log(resp))
.catch(error => console.log(error))
原文地址：https://blog.csdn.net/qq_37703224/article/details/142310500
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！