专业的编程技术博客社区

网站首页 > 博客文章 正文

es6和node.js基础快速入门-3 promise

baijin 2024-09-26 06:56:45 博客文章 3 ℃ 0 评论

本节内容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>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表