IDEA激活码
目录
1.什么是Promise
promise是ES6中的一个重要特性，是异步编程的一种解决方案
什么时候我们会处理异步事件？
一种常见的场景：网络请求
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回
所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调回去
如果网络请求非常复杂时，会出现回调地狱
2.Promise基本语法
我们用一个定时器来模拟异步事件
异步操作之后会有三种状态
pending: 等待状态，比如正在进行网络请求或定时器没有到时间
fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()
new Promise((resolve, reject) => {
setTimeout(() => {
//成功的时候调用resolve
// resolve('Free Loop');
//失败的时候调用reject
reject('Error Message');
}, 1000)
}).then((data) => {
console.log(data);
console.log(data);
console.log(data);
}).catch((err) => {
console.log(err);
})另一种写法
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello World');
// reject('Error Message');
}, 1000)
}).then(data => {
console.log(data)
},err => {
console.log(err)
})3.Promise的链式调用
Promise能够以一种更优雅的方式执行异步操作
下面这个例子体现了链式编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//参数resolve, reject也是函数
new Promise((resolve, reject) => {
//第一次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)
}).then(() => {
//第一次处理的代码
console.log('Insomnia');
console.log('Insomnia');
console.log('Insomnia');
return new Promise((resolve, reject) => {
//第二次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)
})
}).then(() => {
//第二次处理的代码
console.log('Demons');
console.log('Demons');
console.log('Demons');
return new Promise((resolve, reject) => {
//第三次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)
})
}).then(() => {
//第三次处理的代码
console.log('Free Loop');
console.log('Free Loop');
console.log('Free Loop');
})
</script>
</body>
</html>
简化版
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
console.log(res);
return Promise.resolve(res + '111');
}).then(res => {
console.log(res);
return Promise.resolve(res + '222');
// return Promise.reject('error message');
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})进一步简化
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa')
}, 1000)
}).then(res => {
console.log(res);
return res + '111';
}).then(res => {
console.log(res);
return res + '222';
//throw 'error message';
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
4.Promise处理多个网络请求
这里用setTimeout来模拟网络请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({name:'LiSi',age:18});
}, 2000)
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({name:'ZhangSan',age:20});
}, 1000)
}),
]).then(results => {
console.log(results);
});
</script>
</body>
</html>
