promise是处理异步的利器，让异步代码变得干净和直观，让异步代码变得井然有序
1、创建promise实例
1）promise后面接收2个参数resolve和reject，这2个参数又是函数
2）resolve代表成功请求，里面可以接参数。后面接then
3）reject代表失败请求，里面可以接参数。后面接catch
new Promise((resolve,reject) => {
// 2.1..第一次网络请求的代码
setTimeout(() => {
// 当使用了resolve函数，那么就会在结尾调用then函数
resolve()
console.log('我是Promise封装的setTimeout')
},1500)
}).then(() => {
// 第一次拿到结果的处理代码
console.log('hello，第一层访问');
2、网络情况复杂，会导致回调地狱，promise帮你解决
new Promise((resolve,reject) => {
// 2.1..第一次网络请求的代码
setTimeout(() => {
// 当使用了resolve函数，那么就会在结尾调用then函数
resolve()
console.log('我是Promise封装的setTimeout')
},1500)
}).then(() => {
// 第一次拿到结果的处理代码
console.log('hello，第一层访问');
console.log('hello，第一层访问');
// 如果还有请求，就return new Promise，以此类推
return new Promise((resolve, reject) => {
// 2.2..第二次网络请求的代码
setTimeout(() => {
resolve()
},1000)
}).then(() =>{
// 第二次拿到结果的处理代码
console.log('hello，第二层访问');
console.log('hello，第二层访问');
// 第三次请求，继续return
return new Promise((resolve, reject) => {
setTimeout(() => {
// 失败的时候调用reject函数，就不会调用then，而是catch捕获异常
reject('error message')
},1000)
// 箭头函数如果只有参数的时候，data的小括号可以省略
}).then((data) => {
// 因为调用的是reject函数，所以then不会调用
console.log('hello，第三层访问，我不会被调用打印',data);
}).catch(err => {
console.log('第三层访问调用reject函数，捕获异常',err);
})
})
})
// 3..什么情况下会用到promise?
// 一般情况下是有异步操作时，使用Promise对这个异步操作进行封装
// new -> 构造函数（1.保存了一些状态信息 2.执行传入的函数）
// 在执行传入的函数时，会传入2个参数，resolve&reject，它们本身又是函数
3、promise另外表达方式：then(参数1，参数2)
1）then也是函数，所以里面也可以传入参数
2）如果异步请求成功，就执行data箭头函数，如果失败就执行err箭头函数
<script>
// promise有三种状态：pending（等待），已完成（fulfilled），拒绝（rejected）
// then方法接受2个参数，第一个参数成功的回调函数resolve，在promise由‘等待’转换到‘完成’；reject相反
new Promise((resolve, reject) => {
setTimeout(() => {
// resolve('hello resovle');
reject('err message');
},1000)
// then函数也可以传入两个参数(onfulfilled,onrejected)
}).then(data => {
console.log(data);
},err =>{
console.log(err);
})
</script>
4、当异步请求有多个，并且相互关联时候，就需要链式调用，return可以简写
1）这样的链式调用，结构很清晰~~
<script>
// wrapped into
// 网络请求：aaa --> 自己处理（10行）；
// 处理并拼接：aaa111 --> 自己处理（10行）；
// 处理并拼接：aaa111222 --> 自己处理
// 简写1：new Promise((resolve) => resolve(结果))
// 简写2：因为return是直接返回Promise对象，所以可以直接return，去掉Promise.resolve
new Promise((resolve) => {
setTimeout(() => {
resolve('aaa')
},1000)
}).then(res => {
// 1..自己处理10行代码
console.log(res,'第一层的10行处理代码');
// 2..对我们的结果进行第一次的处理
// return new Promise((resolve) => {
// resolve(res + '111')
// })
// 简写
// return Promise.resolve(res + '111')
// reject函数调用，这里也可以手动抛出异常：throw 'error message'
return Promise.reject('error message')
}).then(res => {
console.log(res,'第二层的10行处理代码');
// 3..对我们的结果进行第二次的处理
// 简写2：去掉Promise.resolve()，直接return
return res + '222'
}).then(res => {
console.log(res,'第三层的10行处理代码');
}).catch(err => {
console.log(err);
})
</script>
5）Promise.all的使用：当一个请求操作需要多个异步请求都完成时，这里就可以使用Promise.all来判断完成情况
<script>
// Promise.all的作用就是当一个结果需要2个请求完成时候，promise.all帮忙做了判断
Promise.all([
new Promise(resolve => {
// 第一个异步请求
setTimeout(() => {
resolve({name:'result1',age:'10'});
console.log('我是第一个promise，用时1秒种')
},1000)
}),
new Promise(resolve => {
// 第二个异步请求，会在2000后才执行then，判断2个异步请求都完毕
setTimeout(() => {
resolve({name:'result2',age:'20'});
console.log('我是第二个promise，用时2秒种')
},2000)
})
]).then(res => {
// res[]下角标代表第几个异步请求的结果
console.log(res[0]);
console.log(res[1]);
// 返回res数组
console.log(res);
})
</script>
Promise.all结果
网友评论