什么是Promise呢？
ES6中一个非常重要和好用的特性就是Promise
但是初次接触Promise会一脸懵逼，这TM是什么东西？
看看官方或者一些文章对它的介绍和用法，也是一头雾水。
Promise到底是做什么的呢？
Promise是异步编程的一种解决方案。
那什么时候我们会来处理异步事件呢？
一种很常见的场景应该就是网络请求了。
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。
所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。
但是，当网络请求非常复杂时，就会出现回调地狱。
OK，我以一个非常夸张的案例来说明。
网络请求的回调地狱
我们来考虑下面的场景
(
有夸张的成分
)
：
我们需要通过一个
url1
从服务器加载一个数据
data1
，
data1
中包含了下一个请求的
url2
我们需要通过
data1
取出
url2
，从服务器加载数据
data2
，
data2
中包含了下一个请求的
url3
我们需要通过
data2
取出
url3
，从服务器加载数据
data3
，
data3
中包含了下一个请求的
url4
发送网络请求
url4
，获取最终的数据
data4
上面的代码有什么问题吗？
正常情况下，不会有什么问题，可以正常运行并且获取我们想要的结果。
但是，这样额代码难看而且不容易维护。
我们更加期望的是一种更加优雅的方式来进行这种异步操作。
如何做呢？就是使用Promise。
Promise
可以以一种非常优雅的方式来解决这个问题。
定时器的异步事件
我们先来看看
Promise
最基本的语法。
这里，我们用一个定时器来模拟异步事件：
假设下面的
data
是从网络上
1
秒后请求的数据
console.log
就是我们的处理方式。
这是我们过去的处理方式，我们将它换成
Promise
代码
这个例子会让我们感觉脱裤放屁，多此一举
首先，下面的
Promise
代码明显比上面的代码看起来还要复杂。
其次，下面的
Promise
代码中包含的
resolve
、
reject
、
then
、
catch
都是些什么东西？
我们先不管第一个复杂度的问题，因为这样的一个屁大点的程序根本看不出来
Promise
真正的作用。
我们先来认认真真的读一读这个程序到底做了什么？
new Promise
很明显是创建一个
Promise
对象
小括号中
((resolve, reject) => {})
也很明显就是一个函数，而且我们这里用的是之前刚刚学习过的箭头函数。
但是
resolve, reject
它们是什么呢？
我们先知道一个事实：在创建
Promise
时，传入的这个箭头函数是固定的（一般我们都会这样写）
resolve
和
reject
它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败来决定调用哪一个。
成功还是失败？
如果是成功的，那么通常我们会调用
resolve(
messsage
)
，这个时候，我们后续的
then
会被回调。
如果是失败的，那么通常我们会调用
reject(error)
，这个时候，我们后续的
catch
会被回调。
OK
，这就是
Promise
最基本的使用了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Promise的基本使用</title>
</head>
<body>
<script>
//1.使用setTimeout
// setTimeout(()=>{
// console.log("Hello World");
// },1000)
//参数 -> 函数(resolve,reject)
//resolve , reject 本身他们又是函数
// new Promise((resolve, reject) => {
//
// //第一次网络请求的代码
// setTimeout(() => {
// resolve();
// }, 1000).then(() => {
//
// //第一次拿到结果的处理代码
// console.log("hello World");
// console.log("hello World");
// console.log("hello World");
// console.log("hello World");
//
// //第二次网络请求的代码
// return new Promise(((resolve, reject) => {
// setTimeout(() => {
// resolve();
// }, 1000)
// })).then(() => {
//
// //第二次拿到结果的处理代码
// console.log("Hello vuejs")
// console.log("Hello vuejs")
// console.log("Hello vuejs")
// console.log("Hello vuejs")
//
// //第三次网络请求的代码
// return new Promise(((resolve, reject) => {
// setTimeout(() => {
// resolve();
// }, 1000)
// })).then(() => {
//
// //第二次拿到结果的处理代码
// console.log("Hello Python")
// console.log("Hello Python")
// console.log("Hello Python")
// console.log("Hello Python")
// });
// });
// })
// });
//什么情况下会使用Promise?
//一般情况下是有异步操作时，使用Promise对这个异步操作进行封装
// new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数)
// 在执行传入的回调函数时，会传入两个参数，resolve, reject 本身又是函数
new Promise((resolve, reject)=>{
setTimeout(()=>{
//成功的时候调用resolve
//resolve("Hello World")
//失败的时候调用reject
reject('error message')
},1000)
}).then((data)=>{
//100行的处理代码
console.log(data);
console.log(data);
console.log(data);
console.log(data);
}).catch((error)=>{
console.log(error);
});
</script>
</body>
</html>
Promise三种状态
首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise
异步操作之后会有三种状态
我们一起来看一下这三种状态
:
- pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
- fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
- reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()
Promise另外一种写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
new Promise(((resolve, reject) => {
setTimeout(()=>{
// resolve("hello");
reject("error");
},1000)
})).then(data=>{
console.log(data);
}, err=>{
console.log(err);
})
</script>
</body>
</html>
Promise的链式调用
我们在看
Promise
的流程图时，发现无论是
then
还是
catch
都可以返回一个
Promise
对象。
所以，我们的代码其实是可以进行链式调用的：
这里我们直接通过
Promise
包装了一下新的数据，将
Promise
对象返回了
Promise.resovle
()
：将数据包装成
Promise
对象，并且在内部回调
resolve()
函数
Promise.reject
()
：将数据包装成
Promise
对象，并且在内部回调
reject()
函数
链式调用简写
简化版代码：
如果我们希望数据直接包装成
Promise.resolve
，那么在
then
中可以直接返回数据
注意下面的代码中，我讲
return
Promise.resovle
(data)
改成了
return data
结果依然是一样的
