基本概念：
Promise：是ES6中新增的异步编程解决方案，体现在代码中它是一个对象，
可以通过 Promise 构造函数来实例化。
new Promise(cb) ===> 实例的基本使用 Pending Resolved Rejected
普通的异步
let ajax = function(callback){
console.log('执行')
setTimeout(function () {
console.log()
callback&&callback.call()
},1000);
};
ajax(function(){
console.log('timeout1')
})
Promiese 基本调用
let ajax = function(){
console.log('执行2');
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve()
},1000)
// resolve:执行
// reject：中断
})
//返回Promise实例，这个实例是有then方法的
//第一个函数对应resolve,第二个函数对应reject
ajax().then(function(){
console.log('promise','timeout')
})
两个原型方法：
- Promise.prototype.then()
- Promise.prototype.catch()
两个常用的静态方法：
- Promise.all()
- Promise.resolve()
new promise(cb)的状态
pending(进行中) ===> Resolved(已完成)
Pending(进行中) ===> Rejected（已失败）
Promise例子
let ajax = function(){
console.log('执行3');
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve()
},1000)
})
ajax()
.then(function(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve()
},2000)
})
}).then(function(){
console.log('timeout3')
})
Promise例子
let ajax = function(num) {
console.log('冷兔')
return new Promise(function(resolve,reject){
if(num>5){
resolve()
}else {
throw new Error('出错了')
}
})
}
//promise捕获到了错误
ajax(4).then(function(){
console.log('log',2)
}).catch(function(err){
console.log('catch',err)
})
ajax(6).then(function(){
console.log('log',3)
}).catch(function(err){
console.log('catch',err)
})
Promise实例
const imgs = [
"http://img1.mm131.me/pic/3095/5.jpg"
];
const p = new Promise(function(resolve,reject){
const img = new Image();
img.src = imgs[0 ];
img.onload = function(){
resolve(this)
};
img.onerror = function(){
reject(new Error('图片加载失败'))
}
})
console.log(123)
p.then(function(img){
console.log("加载完成");
document.body.appendChild(img)
}).catch(function(err){
console.log(err)
})
//不会阻塞这里代码执行
console.log(456)
Promise.all 可以将多个Promise实例包装秤一个新的Promise实例
当所以Promise实例的状态都变成resolved,Promise.all的状态才会变成resolved，此时返回值组成一个数据组，传递给then中的resove函数
只要其中一个被rejected，Promise.all的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
const imgs = [
"http://img1.mm131.me/pic/3095/5.jpg",
"http://img1.mm131.me/pic/3095/6.jpg",
"http://img1.mm131.me/pic/3095/7.jpg"
];
function loadImg(url){
const p = new Promise(function(resolve, reject){
const img = new Image()
img.src = url
img.onload = function(){
resolve(this)
};
img.onerror = function(){
reject(new Error('图片加载失败'))
}
});
return p;
}
//接收一个数组，是多个Promise的集合
const allDone = Promise.all([loadImg(imgs[0]),loadImg(imgs[1]),loadImg(imgs[2]),loadImg('')])
allDone.then(function(datas){
console.log(datas); //imgs的集合
//把图片放在页面中
datas.forEach(function(item,i){
document.body.appendChild(item)
})
}).catch(function(err){
console.log(err)
})
Promise.resolve 的三种用法
// 参数是Promise实例，将不做任何修改，原封不动地返回这个实例
const imgs = [
"http://img1.mm131.me/pic/3095/5.jpg",
"http://img1.mm131.me/pic/3095/6.jpg",
"http://img1.mm131.me/pic/3095/7.jpg"
];
function loadImg(url){
const p = new Promise(function(resolve, reject){
const img = new Image()
img.src = url
img.onload = function(){
resolve(this)
};
img.onerror = function(){
reject(new Error('图片加载失败'))
}
});
return p;
}
Promise.resolve(loadImg(imgs[0])).then(function (img){
document.body.appendChild(img);
})
//将对象转为Promise对象，然后就立即执行 thenable 对象的then方法
Promise.resolve({
then(resolve, reject){
const img = new Image();
img.src = imgs[1];
img.onload = function(){
resolve(this)
}
}
}).then(function(img){
docum.body.appendChild(img);
})
// 第三种使用方法
console.log(Promise.resolve())
Promise.resolve('canshu').then(function(str){
console.log(str) // canshu
})
Promise.resolve('canshu').then(function(resolve, rejected){
console.log(resolve) //canshu
})
