目录
一、什么是Promise
Promise是异步编程的一种解决方案。（老Java们狂喜）
可是ajax也可以异步啊，为什么要学promise？
promise可以以链式编程的思想很优雅的解决这个问题。他其实是封装异步的操作。将网络请求的代码和处理逻辑进行分离（then里面就是处理逻辑的部分，前面是网络请求的部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
//1.第一个参数是函数(resolve,reject)，可以类比setTimeout
//2.resolve,reject又分别都是函数
new Promise((resolve,reject)=>{
setTimeout(()=>{
//调用成功运行resolve
resolve('徐鹏')
//调用失败运行reject
reject('xxx')
},1000)
}).then((data)=>{//成功对应的逻辑处理
console.log(data)
}).catch((err)=>{//失败对应的逻辑
console.log(err)
})
</script>
</html>
二、promise三种状态
promise封装异步操作之后会有三种状态：
- pending：等待状态。比如正在进行网络请求，或者定时器没有到时间
- fulfill：满足状态。当我们主动回调了resolve时，就处于该状态，并且会回调.then()
- reject：拒绝状态。当我们主动回调了reject时，就处于该状态，并且会回调.catch()
三、promise链式调用
调用里面会嵌套调用，这样套娃的就容易很乱，我们需要链式调用处理。
1.方式一
一个请求，内部包含另一个请求的完整过程
<script>
new Promise((resolve,reject)=>{
//第一次网络请求
setTimeout(()=>{
resolve()
},1000)
}).then(()=>{
//第一次拿到结果的处理代码
console.log('111')
return new Promise((resolve,reject)=>{
//第二次网络请求
setTimeout(()=>{
resolve()
},1000)
}).then(()=>{
//第二次拿到结果的处理代码
console.log('222')
})
})
</script>2.方式二
<script>
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('徐鹏')
},1000)
}).then(res=>{
console.log(res,'111')
return Promise.reject('error 徐鹏')
// throw 'error'
}).then(res=>{
console.log(res,'222')
return Promise.resolve(res+'22')
}).catch(err=>{
console.log('333')
console.log(err)
})
</script>四、Promise的all的使用
如果一个需求需要依赖于两个请求结果，怎么办？因为这两个结果是异步调用，你也不知道哪个先来，哪个后来。
我们来做一个模拟例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
// Promise.all([
// new Promise((resolve,reject)=>{
// $.ajax({})
// }),
// new Promise((resolve,reject)=>{
// $.ajax({})
// }),
// ]).then(results=>{
// results[0]
// results[0]
// })
Promise.all([
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('111')
},1000)
}),
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('222')
},2000)
})
]).then(results=>{
console.log(results)
})
</script>
</html>