142 lines
4.9 KiB
HTML
142 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>promise</title>
|
||
</head>
|
||
<body>
|
||
<!-- promise是es6的时候才更新出来的:promise本身是同步的，但调用promise的过程是异步的（then通过回调拿结果） -->
|
||
<!-- Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。
|
||
它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。
|
||
|
||
JS执行——Promise： Pending状态（进行中）
|
||
Fulfilled状态（已成功）
|
||
Rejected状态（已失败）
|
||
|
||
一旦状态改变就不会再变 （两种状态改变：成功或失败）
|
||
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
|
||
|
||
resolve:将Promise对象状态由“未完成”变为“成功”，即Pending -> Fulfilled，在异步操作成功时调用，并将异步操作的结果作为参数传递出去
|
||
reject：将Promise对象状态由“未完成”变为“失败”，即Pending -> Rejected，在异步操作失败时调用，并将异步操作的结果作为参数传递出去。
|
||
|
||
Promise实例生成后，可用then方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数：
|
||
在Promise新建后会立即执行，然后，then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行。
|
||
then在Promise对象状态改为Resolved时调用 （必选）；Promise对象状态改为Rejected时调用 （可选）
|
||
|
||
|
||
拓展 async/await
|
||
async：异步——————————async 函数必定返回 Promise，我们把所有返回 Promise 的函数都可以认为是异步函数。
|
||
特点体现在以下四点： 内置执行器
|
||
更好的语义
|
||
更广的适用性
|
||
返回值是 Promise
|
||
|
||
await：等待——————————await命令后面一般是一个 Promise 对象，返回该对象的结果（利用await来等待一个Promise。）如果不是 Promise 对象，就直接返回对应的值。
|
||
另一种情况是，await命令后面是一个thenable对象（即定义then方法的对象），那么await会将其等同于 Promise 对象。
|
||
|
||
|
||
Promise优缺点：
|
||
优点 缺点
|
||
解决回调 无法监测进行状态
|
||
链式调用 新建立即执行且无法取消
|
||
减少嵌套 内部错误无法抛出 -->
|
||
|
||
|
||
|
||
<!-- 链式调用：当一个方法执行结束以后直接把返回值用于下一个方法
|
||
例：
|
||
num = 0;
|
||
test(){
|
||
this.num += 1
|
||
return this.num
|
||
}
|
||
test2(){
|
||
this.num += 100
|
||
return this.num
|
||
}
|
||
按理说test() 和 test2() 分别调用两次 ,console.log(ajax.test2())即1+100=101;
|
||
|
||
num = 0;
|
||
test(){
|
||
this.num += 1
|
||
return this (返回了一个this指向)
|
||
}
|
||
test2(){
|
||
this.num += 100
|
||
return this.num
|
||
}
|
||
链式调用写法：var result = ajax.test().test2() console.log(result)即可
|
||
因此，一定要确认this指向的正确性！！！ -->
|
||
</body>
|
||
|
||
|
||
|
||
<script src="./ajax promise.js"></script>
|
||
<!-- promise异步方案 -->
|
||
<!-- <script>
|
||
console.log(1);
|
||
ajax.get({
|
||
url:"http://localhost",
|
||
data:{
|
||
id:1,
|
||
page:2
|
||
},
|
||
header:{
|
||
'Content-Type':'application/json;charset=UTF-8'
|
||
}
|
||
}).then(res => {
|
||
console.log("2",res);
|
||
}).catch(err => {
|
||
console.log(err);
|
||
})
|
||
console.log(3);
|
||
</script> -->
|
||
|
||
<!-- promise同步方案：将promise的异步调用转为同步调用 -->
|
||
<script>
|
||
// console.log(1);
|
||
ajax.get({
|
||
url:"http://localhost",
|
||
data:{
|
||
id:1,
|
||
page:2
|
||
},
|
||
header:{
|
||
'Content-Type':'application/json;charset=UTF-8'
|
||
}
|
||
}).then(res => {
|
||
console.log("2",res);
|
||
}).catch(err => {
|
||
console.log(err);
|
||
})
|
||
// console.log(3);
|
||
|
||
|
||
// async写在最近的方法名前面，和await配套使用
|
||
var a = async () => {
|
||
console.log(1);
|
||
var res = await ajax.get({
|
||
url:"http://localhost",
|
||
data:{
|
||
id:1,
|
||
page:2
|
||
},
|
||
header:{
|
||
'Content-Type':'application/json;charset=UTF-8'
|
||
}
|
||
})
|
||
console.log("2",res);
|
||
console.log(3);
|
||
}
|
||
|
||
console.log(4);
|
||
// a外部方法调用是异步的,a内部是同步的,先跑完异步再来跑同步
|
||
a();
|
||
console.log(5);
|
||
|
||
// 结果:4 1 5 23
|
||
// 原因如下:首先从上往下同步执行4,到a(),执行了1,发现await内部等待,外部就跑去执行5,最后等待得到2和3
|
||
</script>
|
||
</html> |