promise的简单用法
<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>
//网络请求：aaa -> 自己处理返回的数据（10行代码），然后拼接aaa和111变成aaa111
//网络请求：aaa111 -> 自己处理返回的数据（10行代码），然后拼接aaa111和222变aaa111222
//网络请求：aaa111222 -> 自己处理返回的数据
// new Promise((resolve)=>{
// setTimeout(()=>{
// //成功时调用
// resolve("aaa");
// },1000)
// }).then(res=>{
// console.log(res,"第一层的10行处理代码");
// //对结果进行第一次处理
// return new Promise((resolve)=>{
// resolve(res+"111");
// })
// }).then(res=>{
// console.log(res,"第二层的10行处理代码");
// //对结果进行第二次处理
// return new Promise((resolve)=>{
// resolve(res+"222");
// })
// }).then(res=>{
// console.log(res,"第三层的10行处理代码");
// })
//new Promise(resolve => resolve(结果))简写 Promise.resolve(res+"111");
// new Promise((resolve)=>{
// setTimeout(()=>{
// //成功时调用
// resolve("aaa");
// //失败时调用
// },1000)
// }).then(res=>{
// console.log(res,"第一层的10行处理代码");
// //对结果进行第一次处理
// return Promise.resolve(res+"111");
// // return Promise.reject("错误信息");
// }).then(res=>{
// console.log(res,"第二层的10行处理代码");
// //对结果进行第二次处理
// return Promise.resolve(res+"222");
// }).then(res=>{
// console.log(res,"第三层的10行处理代码");
// })//.catch(err=>{
// // console.log(err);
// // })
//省略掉Promise.resolve
// new Promise((resolve,reject)=>{
// setTimeout(()=>{
// //成功时调用
// resolve("aaa");
// //失败时调用
// // reject("错误信息");
// },1000)
// }).then(res=>{
// console.log(res,"第一层的10行处理代码");
// //对结果进行第一次处理
// // return res+"111";
// throw res;
// }).then(res=>{
// console.log(res,"第二层的10行处理代码");
// //对结果进行第二次处理
// return res+"222";
// }).then(res=>{
// console.log(res,"第三层的10行处理代码");
// }).catch(err=>{
// console.log(err);
// })
</script>
</body>
</html>promise的使用
<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>
// 使用setTimeout
// setTimeout(()=>{
// console.log("hellobug");
// },1000)
//下面这执行顺序看起来很乱
// setTimeout(()=>{
// console.log("hellobug1");
// console.log("hellobug1");
// console.log("hellobug1");
// console.log("hellobug1");
// console.log("hellobug1");
// console.log("hellobug1");
// setTimeout(()=>{
// console.log("hellobug2");
// console.log("hellobug2");
// console.log("hellobug2");
// console.log("hellobug2");
// console.log("hellobug2");
// console.log("hellobug2");
// setTimeout(()=>{
// console.log("hellobug3");
// console.log("hellobug3");
// console.log("hellobug3");
// console.log("hellobug3");
// console.log("hellobug3");
// console.log("hellobug3");
// },1000)
// console.log("hellobug1");
// console.log("hellobug1");
// },1000)
// console.log("hellobug2");
// console.log("hellobug2");
// },1000)
// Promise 的参数中，resolve和reject本身就是函数
//链式编程
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve();
},1000)
}).then(()=>{
//第一次网络请求的代码
console.log("hellobug1");
console.log("hellobug1");
console.log("hellobug1");
console.log("hellobug1");
console.log("hellobug1");
console.log("hellobug1");
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve();
},1000)
})
}).then(()=>{
//第二次网络请求的代码
console.log("hellobug2");
console.log("hellobug2");
console.log("hellobug2");
console.log("hellobug2");
console.log("hellobug2");
console.log("hellobug2");
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve();
},1000)
})
}).then(()=>{
//第三次网络请求的代码
console.log("hellobug3");
console.log("hellobug3");
console.log("hellobug3");
console.log("hellobug3");
console.log("hellobug3");
console.log("hellobug3");
})
//什么情况下会用到promise 一般情况下是有异步操作时，使用promise对这个异步情况进行封装
new Promise((resolve,reject)=>{
setTimeout(()=>{
//成功时调用
// resolve("请求成功");
//失败时调用
reject("请求失败");
},1000)
}).then((data)=>{
console.log(data);
}).catch((err)=>{
console.log(err);
})
</script>
</body>
</html>promise的例子
<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.all([
new Promise((resolve,reject)=>{
// resolve("resolve1");
resolve({name: "峰锅", age: 20});
}),
new Promise((resolve,reject)=>{
// resolve("resolve2");
resolve({name: "峰爷", age: 21});
})
]).then(res=>{
//res是两个resolve返回的参数组成的数组
console.log(res);//res[0] [{name: "峰锅", age: 20},{name: "峰爷", age: 21}]
console.log(res[0]);//res[0] {name: "峰锅", age: 20}
console.log(res[1]);//res[1] {name: "峰爷", age: 21}
})
</script>
</body>
</html>promise的另外处理方法
<!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>
new Promise((resolve,reject)=>{
setTimeout(()=>{
//成功时调用
// resolve("请求成功");
//失败时调用
reject("请求失败");
},1000)
}).then((data)=>{
console.log(data);
},(err)=>{
console.log(err);
})
</script>
</body>
</html>
