【五】Ajax与异步编程之异步编程
【1】异步编程
-
js默认是单线程运行的，这意味着两段代码不能同时运行，所以在同步代码执行过程中，代码是逐行地运行的。
-
简单来理解就是：
- 同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
-
关于在javascript中异步编程的方式
- 常用的无非就是定时器、ajax、Promise、Generator、async/await、服务器推技术。
-
服务器推技术：
- WebSocket，Worker，EventSource三大技术。
【2】Promise
- Promise 是ES6推出异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
- 它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
- Promise 对象是一个代理对象（代理一个值），被代理的值在 Promise 对象创建时可能是未知的。
- 它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。
- 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的 promise 对象。
Promise的三种状态
-
pending：
- 初始状态，既不是成功，也不是失败状态；
-
fulfilled：
- 意味着操作成功完成；
-
rejected：
- 意味着操作失败。
Promise 对象只有两种状态的变化可能性：
pending变为fulfilled状态
pending变为rejected状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var status = false;
var response = new Promise((resolve, reject)=>{
// 下载/读取文件等耗时操作，容易阻塞的代码
// ....
if(status === false){
// 写耗时的代码，结果放在resolve作为参数提供给调用者
resolve("成功的结果");
}else{
reject("错误了！！！你玩大了！");
}
});
console.log("1")
response.then(response=>{
console.log(response);
}).catch(error=>{
console.log(error)
})
console.log("2")
</script>
</body>
</html>
【3】Generator
生成器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 生成器函数
function* gen(){
// yield 暂停
yield 100
yield 200
yield 300
yield 400
return 500
}
// 生成器函数的返回值就是生成器对象
let g = gen()
console.log(g)
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next()) // 可以获取retrun返回值
// for循环无法获取生成器的return返回值，仅能回去yield的返回值
for(let item of gen()){
console.log(item)
}
</script>
</body>
</html>
【4】async/await
- async/await 可以实现协程的简化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// async 标记当前函数为异步
async function request() {
try {
// await 等待
const data1 = await fetch("http://127.0.0.1:8080",{mode:"cors"}).then(response=>response.json());
const data2 = await fetch("http://127.0.0.1:8080",{mode:"cors"}).then(response=>response.json());
console.log(data1);
console.log(data2);
} catch (e) {
console.log('出错啦');
}
}
request()
console.log("hello!!")
</script>
</body>
</html>
【5】小结
- 大部分公司：
- 前端开发的技术：vue/react/angular + 打包工具 + web服务器软件 + 压缩工具
- 一部分公司：
- ts+vue/react/angular + 打包工具 + web服务器软件 + 压缩工具
- 少部分公司：
- jquery/bootstap + 打包工具 + web服务器软件 + 压缩工具