如果你看了我的上一篇文章,也就是 jQuery.Deferred 那么这篇文章应该很好理解
点击查看~
/**
* Promise
* 这是一个简单的 promise
* new Promise : 定义了一个 promise 对象
* resolve : 这是定义成功执行的回调函数
* reject : 这是定义失败执行的回调函数
* then : 传入两个函数, 一个是成功时候调用的函数, 一个是失败的时候调用的函数
* 返回的必须是一个 Promise 实例, then 返回的默认就是 执行 then 函数的对象, 才可以链式操作
*/
var ajax = () => {
console.log('1')
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
}
ajax()
.then(() => {
return new Promise((resolve, reject) => {
console.log('2')
setTimeout(() => {
resolve()
}, 2000)
})
})
.then(() => {
console.log('3')
})
/**
* promise 小 demo 打印图片的宽高
*/
function loadImg(src) {
var promise = new Promise(function(resolve, reject) {
var img = document.createElement('img')
img.onload = function() {
resolve(img)
}
img.onerror = function() {
reject(img)
}
img.src = src
})
}
var src = "//www.baidu.com/img/bd_logo1.png?where=super"
var result = loadImg(src)
result.then(function(img) {
console.log("width", img.width);
// return img 不然的话 会报错 错误是 height undefined .
// 为什么是这样是因为 : 函数需要有返回值的啊.
return img
}, function(img) {
console.log("err 1");
}).then(function(img) {
console.log("height", img.height);
}, function(img) {
console.log("err 2");
})
// 定义一个 promise 函数,
function loadImg(src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img')
img.src = src
img.onload = function() {
resolve(img)
}
img.onerror = function(err) {
reject(err)
}
})
}
// // 定义方法,用来添加到页面中
function showImgs(img) {
img.forEach(item => {
document.body.appendChild(item)
});
}
// /**
// * all : 是当所有的都加载过之后才会执行.
// */
Promise.all([
loadImg(
'//www.baidu.com/img/bd_logo1.png?where=super'
),
loadImg(
'//www.baidu.com/img/bd_logo1.png?where=super'
),
loadImg(
'//www.baidu.com/img/bd_logo1.png?where=super'
)
]).then(showImgs)
/**
* 捕获成功时的异常
*/
function loadImg(src) {
return new Promise(function(resolve, reject) {
var img = document.createElement('img')
img.onload = function() {
resolve(img)
}
img.onerror = function() {
reject(err)
}
img.src = src
})
}
var src = "//www.baidu.com/img/bd_logo1.png?where=super"
var result = loadImg(src)
result.then(function(img) {
console.log("width", img.width);
throw new Error('自定义错误') // 模拟异常.
return img
}).then(function(img) {
console.log("height", img.height);
}).catch(function(ex) { // 相当于 try...catch
console.log(ex);
})
/**
* 捕获失败时的异常
*/
function loadImg(src) {
return new Promise(function(resolve, reject) {
var img = document.createElement('img')
img.onload = function() {
resolve(img)
}
img.onerror = function() {
reject("图片加载失败")
}
img.src = src
})
}
// 手动把图片的地址改为异常,所以就会捕获到异常
var src = "//1www.baidu.com/img/bd_logo1.png?where=super"
var result = loadImg(src)
result.then(function(img) {
console.log("width", img.width);
return img
}).then(function(img) {
console.log("height", img.height);
}).catch(function(ex) {
console.log(ex); // 打印异常
})
/**
* promise 串联
*/
function loadImg(src) {
return new Promise(function(resolve, reject) {
var img = document.createElement('img')
img.onload = function() {
resolve(img)
}
img.onerror = function() {
reject("图片加载失败")
}
img.src = src
})
}
var src1 = "//www.baidu.com/img/bd_logo1.png?where=super"
var result1 = loadImg(src1)
var src2 = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1299248511,111772763&fm=26&gp=0.jpg'
var result2 = loadImg(src2)
result1.then(function(img) {
console.log('第一个图片加载成功', img.width);
// 一定要 return 下一个 的对象 ,不然执行的还是 result1 的then
return result2
}).then(function(img) {
console.log('第二个图片加载成功', img.width);
}).catch(function() {
console.log('加载失败');
})
/**
* Promise.all 和 Promise.race
* all : 等到所有的 promise 都执行过才执行
* race : 只要有其中一个 promise 执行后就执行
*/
function loadImg(src) {
return new Promise(function(resolve, reject) {
var img = document.createElement('img')
img.onload = function() {
resolve(img)
}
img.onerror = function() {
reject("图片加载失败")
}
img.src = src
})
}
var src1 = "//www.baidu.com/img/bd_logo1.png?where=super"
var result1 = loadImg(src1)
var src2 = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1299248511,111772763&fm=26&gp=0.jpg'
var result2 = loadImg(src2)
Promise.all([result1, result2]).then(function(datas) {
console.log(datas[0]);
console.log(datas[1]);
})
Promise.race([result1, result2]).then(function(data) {
console.log('race', data);
})
/**
* 总结: promise 是一个构造函数
* 状态 : promise 有三个状态 刚开始的时候时 待执行状态, 执行成功时的状态, 执行失败时的状态
* 接受两个参数 : resolve reject
* resolve : 定义执行成功时的回调函数
* reject : 定义执行失败时的回调函数
* then : 传入两个函数, 一个是成功时候调用的函数, 一个是失败的时候调用的函数
* 返回的必须是一个 Promise 实例, then 返回的默认就是 执行 then 函数的对象, 才可以链式操作
* 捕获异常 : Error 和 reject 都要考虑
* catch : 统一捕获异常,只需要再最后一个 then 的后面加上 catch 函数.
* : 这个就相当于 我们 try...catch 时一样的.
* Promise.all : 用一个数组, 传入多个 promise ,等到所有的 promise 实例都加载完成之后, 再执行
* Promise.race : 用一个数组, 传入多个 promise, 只要有一个 promise 实例加载完成之后, 就执行.
* 多个串联 : 再上一个then 函数结尾的时候 return 下一个 promise 对象, 就可以达到串联
*/