promise的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Promise是ES6中的一个内置的对象（实际上是一个构造函数，
通过这个构造函数我们可以创建一个Promise对象），它是为了解决异步问题的。-->
<title>Title</title>
</head>
<body>
<script>
// 参数 =>(resolve, reject)
// resolve ,reject 本身也是函数
//什么时候使用promise 一般有异步请求的情况下 使用promise对异步请求进行封装
//异步请求成功的情况下 使用 resolve() then 失败的情况使用 reject() catch
new Promise((resolve, reject) => {
setTimeout(()=>{
resolve();
},1000)
}).then(()=>{
console.log("promise初次使用");
return new Promise((resolve, reject) => {
setTimeout(()=>{
resolve();
},2000)
})
}).then(()=>{
console.log("promise再次使用");
return new Promise((resolve, reject) => {
reject("出现错误");
})
}).catch(err=>console.log(err))
</script>
</body>
</html>
promise的另外使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Promise是ES6中的一个内置的对象（实际上是一个构造函数，
通过这个构造函数我们可以创建一个Promise对象），它是为了解决异步问题的。-->
<title>Title</title>
</head>
<body>
<script>
// Promise的三种状态 等待 失败 成功
//.then(a,b) a代表成功后的函数 b代表失败后的函数 调用resolve 则调动a 调用 reject 则调用b
new Promise((resolve, reject) => {
resolve("seccess");
// reject("error");
}).then(data=>{
console.log(data);
},err=>{
console.log(err);
})
</script>
</body>
</html>
promise的链式调用1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Promise是ES6中的一个内置的对象（实际上是一个构造函数，
通过这个构造函数我们可以创建一个Promise对象），它是为了解决异步问题的。-->
<title>Title</title>
</head>
<body>
<script>
new Promise((resolve, reject) => {
setTimeout(()=>{
resolve();
},1000)
}).then(()=>{
console.log("promise初次使用");
return new Promise((resolve, reject) => {
setTimeout(()=>{
resolve();
},2000)
})
}).then(()=>{
console.log("promise再次使用");
return new Promise((resolve, reject) => {
reject("出现错误");
})
}).catch(err=>console.log(err))
</script>
</body>
</html>
promise的链式调用2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Promise是ES6中的一个内置的对象（实际上是一个构造函数，
通过这个构造函数我们可以创建一个Promise对象），它是为了解决异步问题的。-->
<title>Title</title>
</head>
<body>
<script>
//第一种方法
new Promise((resolve, reject) => {
setTimeout(()=>{
resolve("aaaa");
},1000)
}).then((data)=>{
return new Promise(resolve => {
resolve(data+"bbb")
})
}).then((data)=>{
console.log(data,"第一次数据处理");
return new Promise(resolve => {
resolve(data+"ccc")
})
}).then(data=>{
console.log(data,"第二次数据处理");
return new Promise(resolve => {
resolve(data+"ddd")
})
}).then(data=>{
console.log(data,"第三次数据处理");
})
//第二种方法
new Promise((resolve, reject) => {
setTimeout(()=>{
resolve("aaaa");
},1000)
}).then((data)=>{
return Promise.resolve(data+"bbbb")
}).then((data)=>{
console.log(data,"第一次数据处理");
return Promise.resolve(data+"cccc")
}).then(data=>{
console.log(data,"第二次数据处理");
return Promise.resolve(data+"dddd")
}).then(data=>{
console.log(data,"第三次数据处理");
return Promise.reject("失败")
}).catch(err=>{
console.log(err);
});
//第三种方法
new Promise((resolve, reject) => {
setTimeout(()=>{
resolve("aaaa");
},1000)
}).then((data)=>{
return data+"bbbbb";
}).then((data)=>{
console.log(data,"第一次数据处理");
return data+"ccccc";
}).then(data=>{
console.log(data,"第二次数据处理");
return data+"ddddd";
}).then(data=>{
console.log(data,"第三次数据处理");
throw "失败";
}).catch(err=>{
console.log(err);
})
</script>
</body>
</html>
promise的all方法使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Promise是ES6中的一个内置的对象（实际上是一个构造函数，
通过这个构造函数我们可以创建一个Promise对象），它是为了解决异步问题的。-->
<title>Title</title>
</head>
<body>
<script>
//当两个异步请求全部执行结束的时候再执行then函数
Promise.all([new Promise(resolve => {
setTimeout(()=>{
resolve("1秒的方法")
},1000)
}),new Promise(resolve => {
setTimeout(()=>{
resolve("3秒的方法")
},3000)
})]).then(data=>{
//data为数组 data[0]为第一个值 data[1]为第二个值
console.log(data);
})
</script>
</body>
</html>
