ES6之promise
promise
- promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以。
- promise并未剥夺函数return的能力，因此无需层层传递callback回调获取数据。
- 多个异步等待合并并便于解决
promise构造
new Promise(
function (resolve, reject) {
resolve('hello') // 数据处理完成
reject('bye') // 数据处理出错
}
).then(
(res) => {console.log(res)}, // res == hello
(err) => {console.log(err)} // err == bye
)
- resolve的作用是将Promise对象的状态从’未完成’变成’成功’,在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
- reject的作用是将Promise对象的状态从’未完成’变为’失败’，在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。
- promise有三个状态：
1.pending[待定]初始状态
2.fulfillen[实现]操作成功
3.rejected[被否决]操作失败
当promise状态发生改变就会触发then()里的响应函数处理后续步骤。
简单实例
new Promise(resolve => {
setTimeout(() => {
resolve('hello')
}, 2000)
}).then(res => {
console.log(res)
})
分两次，顺序执行
new Promise(resolve => {
setTimeout(() => {
resolve('hello')
}, 2000)
}).then(val => {
console.log(val) // val == 'hello'
return new Promise(resolve => {
setTimeout(() => {
resolve('world')
}, 2000)
})
}).then(val => {
console.log(val) // val == 'world'
})
promise完成后then()
let pro = new Promise(resolve => {
setTimeout(() => {
resolve('hello world')
}, 2000)
})
setTimeout(() => {
pro.then(value => {
console.log(value) // value == hello world
})
}, 2000)
小结：promise作为队列最为重要的特性，我们在任何一个地方生成了一个promise队列后我们可以把他作为一个变量传递到其他地方。
then()
- 接收两个函数作为参数，分别代表fulfilled(成功)和rejected(失败)。
- .then()返回一个Promise实例，所以他可以链式调用。
- 当前面的Promise状态改变时，.then()根据其最终状态选择特定的状态响应函数执行。
- 状态响应函数可以返回新的promise或者其他值，不返回值我们也可以认为他返回了一个null。
- 如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行。
- 如果返回其他任何值则会立即执行下一级.then()。
.then()里面有.then()
因为.then()返回的还是promise实例，所以会等里面的.then()执行完，在执行外面的。
var say = (str,time) =>{
return new Promise((resolve,reject) =>{
setTimeout(()=>{
console.log(str);
resolve(str);
},time)
})
}
say('你好',2000).then(res=>{
return say('我喜歡你',2000)
}).then(res=>{
return say('加个微信',2000)
}).then(res=>{
})
Promise.all()批量执行
- Promise.all([s1,s2,s3])用于将多个promise实例包装成一个新的Promise实例，返回的实例就是普通的promise。
- 他接受一个数组作为参数
- 数组里可以是promise对象，也可以是别的值，只有promise会等待状态改变
- 当所有的promise都完成该promise完成，返回值是全部值的数组
- 有任何一个失败该promise失败，返回值是第一个失败的字promise的结果
- //切菜
function cutUp(){
console.log('开始切菜。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('切菜完毕！');
resolve('切好的菜');
}, 1000);
});
return p;
}
//烧水
function boil(){
console.log('开始烧水。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('烧水完毕！');
resolve('烧好的水');
}, 1000);
});
return p;
}
Promise.all([cutUp(), boil()])
.then((result) => {
console.log('准备工作完毕');
console.log(result);
})
Promise.rase()
有一个promise最先完成就 reslove 返回哪个
下面以三张图片加载为例
//图片地址
var arr = [
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
]
//封装加载图片函数
var loadImg = url =>{
return new Promise((resolve, reject) => {
var img = document.createElement('img');
img.src = url;
img.width = 800;
img.onload = function() {
resolve(img);
}
img.onerror = function(event) {
reject(event);
}
})
}
Promise.race(arr.map(item => {
return loadImg(item);
})).then(res => {
document.body.append(res);
}).catch(err => {
console.error(err);
})
实例回调地狱和Promise对比：
var say = (str,time,callback)=>{
setTimeout(()=>{
console.log(str);
if(callback){
callback();
}
},time)
}
say('你好',5000,()=>{
say('我喜欢你',3000,()=>{
say('加个微信',2000)
})
})
转换为Promise写法：
var say = (str,time) =>{
return new Promise((resolve,reject) =>{
setTimeout(()=>{
console.log(str);
resolve(str);
},time)
})
}
say('你好',2000).then(res=>{
return say('我喜歡你',2000)
}).then(res=>{
return say('加个微信',2000)
}).then(res=>{
})