加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
54-异步解决方案.html 5.52 KB
一键复制 编辑 原始数据 按行查看 历史
wangcai 提交于 2023-04-04 16:49 . xx‘
<meta charset="utf-8">
<!-- <script>
// 异步解决方案 如果优雅地解决异步问题
// 前置内容:
// promise 迭代器 可迭代对象 生成器
// 异步的解决方案
// 1)回调函数 回调地狱
// 需求:
// 1.发送一次网络请求, 等到这次网络请求的结果 传学生的编号 得到 学生的姓名
// 2.发送第二次网络请求, 等待这次网络请求的结果 传学生的姓名 得到 学生的成绩
// 3.发送第三次网络请求, 等待这次网络请求的结果 传学生的成绩 得到 成绩的等级
function ajax(data) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(data)
}, 2000)
})
}
// 一层屋嵌套 不优雅
function getData() {
// 第一次发送ajax
ajax("001").then(res1 => {
console.log("res1是学生的姓名");
// 第二次发送ajax
ajax(res1).then(res2 => {
console.log("res2是学生的成绩");
// 第三次发送ajax
ajax(res2).then(res3 => {
console.log("res3是学生的等级");
})
})
})
}
getData()
</script> -->
<!-- <script>
// 异步解决方案 如果优雅地解决异步问题
// 前置内容:
// promise 迭代器 可迭代对象 生成器
// 异步的解决方案
// 1)回调函数 回调地狱
// 2)then链
// 需求:
// 1.发送一次网络请求, 等到这次网络请求的结果 传学生的编号 得到 学生的姓名
// 2.发送第二次网络请求, 等待这次网络请求的结果 传学生的姓名 得到 学生的成绩
// 3.发送第三次网络请求, 等待这次网络请求的结果 传学生的成绩 得到 成绩的等级
function ajax(data) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(data)
}, 2000)
})
}
// 一层屋嵌套 不优雅
function getData() {
// 第一次发送ajax
ajax("001").then(res1 => {
console.log("res1是学生的姓名");
return ajax(res1)
}).then(res2 => {
console.log("res2是学生的成绩");
return ajax(res2)
}).then(res3 => {
console.log("res3是学生的等级");
})
}
getData()
</script> -->
<!-- <script>
// 异步解决方案 如果优雅地解决异步问题
// 前置内容:
// promise 迭代器 可迭代对象 生成器
// 异步的解决方案
// 1)回调函数 回调地狱
// 2)then链
// 3)生成器函数(要学习生成器函数,必须学习迭代器)
// 需求:
// 1.发送一次网络请求, 等到这次网络请求的结果 传学生的编号 得到 学生的姓名
// 2.发送第二次网络请求, 等待这次网络请求的结果 传学生的姓名 得到 学生的成绩
// 3.发送第三次网络请求, 等待这次网络请求的结果 传学生的成绩 得到 成绩的等级
function ajax(data) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(data)
}, 2000)
})
}
// 生成器函数
function* getData() {
let res1 = yield ajax("001")
let res2 = yield ajax(res1)
let res3 = yield ajax(res2)
console.log("res3:", "等级");
}
// 下面这一片代码能不能优化呢?
// TJ co
getData().next().value.then(res1 => {
console.log("res1是学生的姓名");
getData().next(res1).value.then(res2 => {
console.log("res2是学生的成绩");
getData().next(res2).value.then(res3 => {
console.log("res3是学生的等级");
// getData().next(res3)
})
})
})
</script> -->
<script>
// 异步解决方案 如果优雅地解决异步问题
// 前置内容:
// promise 迭代器 可迭代对象 生成器
// 异步的解决方案
// 1)回调函数 回调地狱
// 2)then链
// 3)生成器函数(要学习生成器函数,必须学习迭代器)
// 4)终级方案 async和await
// 需求:
// 1.发送一次网络请求, 等到这次网络请求的结果 传学生的编号 得到 学生的姓名
// 2.发送第二次网络请求, 等待这次网络请求的结果 传学生的姓名 得到 学生的成绩
// 3.发送第三次网络请求, 等待这次网络请求的结果 传学生的成绩 得到 成绩的等级
function ajax(data) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(data)
}, 2000)
})
}
// 生成器函数
// async和await并不能把同步代码变成异步代码
// async和await 仅仅是生成器的语法糖
// koa1.x中 生成函数有大量使用
// react中 有一些中间件,也用到生成器
// 生成器是必学 迭代器 可迭代对象都需要学
async function getData() {
let res1 = await ajax("001")
console.log("res1是学生的姓名");
let res2 = await ajax(res1)
console.log("res2是学生的成绩");
let res3 = await ajax(res2)
console.log("res3是学生的等级");
}
getData()
</script>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化