|
|
@@ -0,0 +1,82 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+ // promise es6新增 优化异步操作的
|
|
|
+ // new Promise((resolve,reject)=>{}).then(()=>{}).catch(()=>{});
|
|
|
+
|
|
|
+ // prmise 一共有3种状态 成功 失败 等待
|
|
|
+ // fulfilled 成功
|
|
|
+ // rejected 失败
|
|
|
+ // padding 等待
|
|
|
+
|
|
|
+ // promise 中有两个参数 resolve,reject 他们两个是函数
|
|
|
+ // 第一个参数 resolve 成功的回调函数
|
|
|
+ // 第二个参数 reject 失败的回调函数
|
|
|
+ // new Promise((resolve,reject)=>{
|
|
|
+ // // 用定时函数模拟数据请求 一秒钟后有结果
|
|
|
+ // setTimeout(()=>{
|
|
|
+ // // 假设数据请求成功
|
|
|
+ // // resolve("hello")
|
|
|
+ // // 假设数据请求失败
|
|
|
+ // reject("world")
|
|
|
+ // },1000)
|
|
|
+ // }).then((res)=>{
|
|
|
+ // console.log('成功',res)
|
|
|
+ // }).catch((res)=>{
|
|
|
+ // console.log('失败',res)
|
|
|
+ // })
|
|
|
+
|
|
|
+
|
|
|
+ // 需求：有两个（或者也可以更多）数据请求 在所有数据请求成功之后 执行相应代码
|
|
|
+
|
|
|
+ // setTimeout(()=>{
|
|
|
+ // console.log('hello')
|
|
|
+ // },1000)
|
|
|
+
|
|
|
+ // setTimeout(()=>{
|
|
|
+ // console.log('world')
|
|
|
+ // },2000)
|
|
|
+
|
|
|
+ let p1 = new Promise((resolve, reject) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ // console.log('hello')
|
|
|
+ resolve();
|
|
|
+ // reject();
|
|
|
+ }, 1000)
|
|
|
+ })
|
|
|
+
|
|
|
+ let p2 = new Promise((resolve,reject)=>{
|
|
|
+ setTimeout(() => {
|
|
|
+ // console.log('world')
|
|
|
+ resolve();
|
|
|
+ }, 5000)
|
|
|
+ })
|
|
|
+
|
|
|
+ // Promise.all() 他会接收若干个promise对象 他会判断如果所有promise对象都是成功状态 那么他就成功，但如果有一个没成功他就是失败
|
|
|
+ // Promise.all() 一般用作于页面中有多个数据请求 所有数据请求成功后 执行相应操作
|
|
|
+ // Promise.all([p1,p2]).then(()=>{
|
|
|
+ // console.log('成功')
|
|
|
+ // }).catch(()=>{
|
|
|
+ // console.log('失败')
|
|
|
+ // })
|
|
|
+
|
|
|
+
|
|
|
+ // 需求2 有两个数据请求 如果有一个成功则马上进入成功状态
|
|
|
+ // Promise.race() 表示多个请求中只要有一个成功或失败就开始响应
|
|
|
+ Promise.race([p1,p2]).then(()=>{
|
|
|
+ console.log('成功')
|
|
|
+ }).catch(()=>{
|
|
|
+ console.log('失败')
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
