Promise的三种状态?
pending 等待中(promise封装的是一个异步操作,异步操作是需要时间的)
fulfilled 成功 resolve()
rejected 失败 reject()
状态只有两种情况:
01 pending --> fulfllied
02 pending --> rejected
状态只要发生改变了,就不会再次改变
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <body>
10 <script>
11 // Promise 单词表示承诺
12 // 是干嘛的? 是js中一种异步编程的解决方案(使异步函数可以同步执行),在没有promise之前,js是通过回调函数来实现异步编程的同步操作的
13 // Promise 解决了什么问题? 回到地狱,回调地狱是什么?回调函数层层嵌套
14 // promise的优势? 使异步函数可以同步的执行,解决了回调地狱的问题
15 // Promise是一个构造函数
16 // 理解:它是一个容器,内部分装了异步操作
17 // 参数:回调函数
18 // resolve表示then方法的回调函数
19 // 参数:lei hao a 会传递给data
20
21
22 // 成功
23 const p=new Promise(function(resolve,reject){
24 // 异步操作成功就调用resolve
25 // 异步操作失败就调用reject
26 setTimeout(()=>{
27 //参数:表示成功后,要传递的数据
28 resolve('lei hao a')
29 },2000)
30 })
31 p.then(function(data){
32 console.log('异步操作成功了',data) //两秒后输出 异步操作成功了 lei hao a
33 })
34
35
36
37
38
39 // 失败
40 const L=new Promise(function(resolve,reject){
41 // 异步操作成功就调用resolve
42 // 异步操作失败就调用reject
43 setTimeout(()=>{
44 //参数:表示失败后:会将参数传递给err
45 reject('出错了')
46 },2000)
47 })
48 L.then(function(data){
49 console.log('异步操作成功了',data)
50 }).catch(function(err){
51 console.log(err)
52 })
53
54 </script>
55 </body>
56 </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function fn(){
return new Promise((resolve)=>{
setTimeout(()=>{
console.log("第一")
resolve()
},2000)
})
}
function fn2(){
return new Promise((resolve)=>{
setTimeout(()=>{
console.log("第二")
resolve()
},2000)
})
}
function fn3(){
return new Promise((resolve)=>{
setTimeout(()=>{
console.log("第三")
},2000)
})
}
// fn().then(fn2).then(fn3)
(async function(){
await fn()
await fn2()
await fn3()
})()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function liang(){
return new Promise(function(resolve){
var bang="亮儿的接力棒"
console.log("亮起跑...");
setTimeout(function(){
console.log("亮到达终点")
resolve(bang);
},3000)
})
}
function ran(bang){
return new Promise(function(resolve){
console.log("ran然拿着"+bang);
setTimeout(function(){
console.log("然到达终点")
resolve(bang);
},5000)
})
}
function dong(bang){
return new Promise(function(resolve){
console.log("dong然拿着"+bang);
setTimeout(function(){
console.log("然到达终点")
resolve();
},8000)
})
}
// liang().then(ran).then(dong).then(function(){
// console.log("比赛结束")
// })
// ES7 啊sing靠 await 额为特是等待的意思,执行完才执行
// 简化then()的时候用
(async function(){
await liang();
await ran();
await dong();
console.log("比赛结束")
})()
/* 传参
(async function(){
var bang=await liang(bang); // reutrn 回来的open(bang)
bang=await ran(bang);
await dong(bang);
console.log("比赛结束")
})()
*/
// 写一个async 函数自调,在里面 直接调用函数,在函数前加上 await就可以,await是等待完才执行,
// async和 await 配合 代替es6中的then(),更容易理解,更直观,更简化
</script>
</body>
</html>
<script>
function fn (){
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('周浩')
}, 2000);
})
}
// async 是用来修饰一个函数的
// async 要放在function 之前
async function foo(){
// await 关键字只能用在async函数中
// await 关键字后面跟一个Promise对象
// await 会等待Promise封装的异步操作执行完毕,才会执行后边的代码
// res就是promise中 resolve的参数
var res =await fn()
console.log(res)//2000好秒后 输出 "周浩"
}
foo()
</script>
<script>
// 1 Promise.all([]) 等所有请求都完成后,再执行后边的操作
Promise.all([
axios.get('http://localhost:3000/user'),
axios.get('http://localhost:3000/student'),
axios.get('http://localhost:3000/teacher'),
])
.then((res)=>{
// console.log(res)
})
// 2 只要有一个请求完成了,就执行一些操作
Promise.race([
axios.get('http://localhost:3000/user'),
axios.get('http://localhost:3000/student'),
axios.get('http://localhost:3000/teacher'),
])
.then((res)=>{
console.log(res)
})
// 3 Promise.resolve() 方法用来直接获取到一个成功的Promise对象
Promise .resolve('123')
.then(res => {
console.log(res)
})
// 4 直接获取到一个失败的Promise对象
Promise.reject()
</script>