Promise 基本定义
es5 中的回调
{ let ajax = function (callback) { console.log('执行') setTimeout(() => { callback && callback.call() }, 1000) } ajax(function () { console.log('回调了') }) }
使用 Promise
{ let ajax = function () { console.log('执行') return new Promise(function(resolve, reject){ // resolve() 执行下一步操作 // reject() 中断当前操作 setTimeout(() => { resolve('哈哈') }, 1000); }) } ajax() .then(function (res) { console.log(`回调了${res}`) }) }
多层嵌套示例
{ let ajax = function () { console.log('执行') return new Promise(function(resolve, reject){ // resolve() 执行下一步操作 // reject() 中断当前操作 setTimeout(() => { console.log('洗菜') resolve('洗菜') }, 1000); }) } ajax() .then(function (res) { return new Promise(function (resolve, reject) { setTimeout(() => { console.log(`${res}=>切菜`) resolve(`${res}=>切菜`) }, 1000); }) }) .then(function (res) { return new Promise(function (resolve, reject) { setTimeout(() => { console.log(`${res}=>炒菜`) }, 1000); }) }) }
Promise 捕获异常错误
{ let ajax = function (num) { console.log('执行') return new Promise(function(resolve, reject){ if (num > 5) { resolve(num) } else { throw Error(`${num}比5小`) } }) } ajax(6). then(function (res) { console.log(res) }). catch(function(err){ console.log(err) }) ajax(3). then(function (res) { console.log(res) }). catch(function(err){ console.log(err) }) }
Promise.all
{ // 所有图片加载完在添加到页面 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 (imgs) { imgs.forEach(img => { document.body.appendChild(img) }) } // Promise.all 当所有图片加载完成之后, 在调用 showImgs 函数将图片添加到页面 Promise.all([ loadImg('http://snsimg.ztjystore.cn/ztnew/ad/img/2019/07/31/1564559889321467.png?imageView2/2/w/720'), loadImg('http://snsimg.ztjystore.cn/ztnew/ad/img/2019/10/12/1570881387228659.jpg?imageView2/2/w/720'), loadImg('http://ztjy-img-dev.szytest.com/ztnew/ad/img/2019/03/07/1551929811422795.jpeg') ]).then(showImgs) }
Promise.race
{ // 有一个图片加载完就添加到页面 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) { let p = document.createElement('p') p.appendChild(img) document.body.appendChild(p) } // Promise.race 实例中有一个状态改变就执行 showImgs 函数 Promise.race([ loadImg('http://snsimg.ztjystore.cn/ztnew/ad/img/2019/07/31/1564559889321467.png'), loadImg('http://snsimg.ztjystore.cn/ztnew/ad/img/2019/10/12/1570881387228659.jpg'), loadImg('http://ztjy-img-dev.szytest.com/ztnew/ad/img/2019/03/07/1551929811422795.jpeg') ]).then(showImgs) }