这篇文章主要是关于Promise的all方法的介绍以及对Promise 的全面回顾
一、Promise的all方法
1.应用场景
假设现在有一个需求,该需求依赖与两个网络请求,只有当两个网络请求成功后才能实现这个需求。我们可以通过all方法来实现,具体见下面的分析。
2.本质
Promise中的all方法,是一个函数,并且传入的参数必须是可迭代对象,所谓的可迭代对象就是可以遍历的。
3.使用方式
针对上面的需求,用all方法实现的具体代码如下:
<script>
Promise.all([
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('results1')
},1000)
}),
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('results2')
},2000)
})
]).then(results =>{
console.log(results)
})
</script>
针对上述的代码,从all、then两个函数入手,解析如下:
首先,all 函数传入的参数定义为数组类型(数组是可迭代对象),将两个网络请求分别放在 promise 中。也可以简单的看成如下结构:Promise.all([网络请求1,网络请求2])
然后就是then函数。then函数传入的参数也是数组类型,分别存放上述两个 resolve 的结果,所以最终在控制台上输出的结果如下:
以上便是Promise中all方法的简单介绍,下面结合前两天的内容,总结一下有关Promise的知识
二、Promise总结
1.概念
Promise是异步编程的一种解决方案,通过将数据请求和数据处理分开来达到代码逻辑清晰的目的 o( ̄▽ ̄)d
2.本质
Promise本质是一个类,所以可以通过new的方式来创建Promise。另外创建的Promise中,根据自己代码的需要传递两个参数 resolve 和 reject,这两个参数本身又是一个函数。最后是有关处理的两个函数** then 和 catch**
3.三种状态
三种状态分别是:Pending、Fulfilled、Reject。
Pending--等待状态,浏览器向服务器发送请求到首届请求结果的过程就处于该状态;Fulfilled--满足状态,浏览器成功接收服务器发送的请求结果时,就处于该状态,并且会执行resolve函数;Reject--拒绝状态,浏览器不接受服务器发送的请求时,就处于该状态,并且会执行reject函数。
4.执行过程
下面结合一张图来分析Promise 的执行过程
首先将异步事件的操作 Async operation 打包到Promise中,Promise就会对异步事件进行处理,处理时分别经历一下几个状态:
第一是向服务器发送网络请求,这个时候的Promise处于Pending状态,直到得到了网络请求的结果就会跳转到下一个状态;
第二是对网络请求的结果分别进行判断。如果成功接收该结果,Promise就处于Fulfilled状态,该状态下的Promise会执行resolve函数并回调then函数执行相关的操作;如果拒绝接收该结果,Prmise就处于Rejected状态,该状态下的Promie就调用reject函数回调catch函数执行相关的处理。
5.链式处理
所谓链式处理可以简单的理解成是函数的迭代调用,有四种写法,分别如下:
// 链式调用1
new Promise((resolve,reject) =>{
setTimeout(()=>{
resolve()
},1000)
}).then(()=>{
console.log('hello,vue')
return new Promise((resolve,reject) =>{
setTimeout(()=>{
resolve()
},1000)
})
}).then(() =>{
console.log('hello,java')
return new Promise((resolve,reject) =>{
setTimeout(()=>{
resolve()
},1000)
})
}).then(() =>{
console.log('hello,JavaScript')
})
// 链式调用2-1
new Promise(resolve =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
// 1.自己处理别的业务的代码
console.log(res,'第一次自己处理别的业务的代码')
// 2.对拿到的结果进行处理
return new Promise(resolve =>{
resolve(res +'111')
})
}).then(res=>{
console.log(res,'第二次自己处理别的业务的代码')
return new Promise(resolve =>{
resolve(res +'222')
})
}).then(res =>{
console.log(res,'第三次自己处理别的业务的代码')
})
// 链式调用2-2
new Promise(resolve =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
console.log(res,'第一次自己处理别的业务的代码')
return Promise.resolve(res +'111')
}).then(res=>{
console.log(res,'第二次自己处理别的业务的代码')
return Promise.resolve(res +'222')
}).then(res =>{
console.log(res,'第三次自己处理别的业务的代码')
})
// 链式调用2-3
new Promise(resolve =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
console.log(res,'第一次自己处理别的业务的代码')
return res +'111'
}).then(res=>{
console.log(res,'第二次自己处理别的业务的代码')
return res +'222'
}).then(res =>{
console.log(res,'第三次自己处理别的业务的代码')
})
6.all方法
all方法主要用来解决一个需求依赖与多个网络请求的情境,只有得到多个的网络请求的结果才能实现需求。
以上就是Promise知识点的总结,有不恰当的地方还请大家指出