本节内容promise的基础理解很重要,es6新特征,和接口交互必备知识点。
es6和node.js基础实战系列,需要一定的js基础,动手实际操作一下会加强理解。现在衍生的很多前端技术都是围绕node.js生态发展,掌握es6,node.js基础知识,才可以继续入门vue.js,element-ui,antd-vue等前端框架。
pre标签里是笔记总结,再坚持一下,前端知识的大门就会打开了。有疑问留言交流哦。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <pre> promise异步回调 用法理解: 通过下面案例可以看出,promise可以完成顺序执行业务中的多层回调. 可以和ajax多接口调用时候形成的回调嵌套写法比对,可以看出promise异步调用的优势(解决回调地狱) //方法和回调链式写法 箭头函数代替匿名函数 //需要顺序执行异步接口业务模拟 const p2 = new Promise((resolve, reject) => { //业务1 var i = new Date(); resolve(i.toDateString()); }).then(function (data) { //业务2依赖业务1数据,所以这里是上个业务处理的回调 console.log("data:回调第1次", data); //return ("v2 " + data) 等同于 下面写法 return Promise.resolve(("v2 " + data)); }).then(function (data) { //业务3依赖业务2数据,所以这里是上个业务处理的回调 console.log("data:回调第2次", data); //throw '业务3发生异常' //return ("v3 " + data) 等同于 下面写法 return Promise.resolve(("v3 " + data)); }).then(function (data) { console.log("data:回调第3次", data); return ("v4 " + data) }).catch(function (err) { //拦截全程业务中异常 console.log("catch error:", err) }) </pre> </body> <script type="application/javascript"> //方法和回调分开 const p1 = new Promise(function (resolve, reject) { //发现resolve就返回一个成功状态的promise,用then回调 resolve('success1 '); throw 'error'; }); //这里then或catch只有一个可以执行 p1.then(function (data) { console.log(data) }); p1.catch(function (err) { console.log(err) }); //end //方法和回调链式写法 箭头函数代替匿名函数 //需要顺序执行异步接口业务模拟 const p2 = new Promise((resolve, reject) => { //业务1 var i = new Date(); resolve(i.toDateString()); }).then(function (data) { //业务2依赖业务1数据,所以这里是上个业务处理的回调 console.log("data:回调第1次", data); //return ("v2 " + data) 等同于 下面写法 return Promise.resolve(("v2 " + data)); }).then(function (data) { //业务3依赖业务2数据,所以这里是上个业务处理的回调 console.log("data:回调第2次", data); //throw '业务3发生异常' //return ("v3 " + data) 等同于 下面写法 return Promise.resolve(("v3 " + data)); }).then(function (data) { console.log("data:回调第3次", data); return ("v4 " + data) }).catch(function (err) { //拦截全程业务中异常 console.log("catch error:", err) }) </script> </html>