js中promise实例解析

大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着。但是也有一个不好的地方,当我们有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着再执行下个回调,这样就会造成层层嵌套,代码不清晰,很容易进入“回调监狱”,就容易造成下边的例子:

async(1, function(value){ async(value, function(value){ async(value, function(value){  async(value, function(value){  async(value, function(value){   async(value, final);  });  }); }); });});

登录后复制

这样的写法会让人崩溃,那么有什么办法可以解决这个问题呢,或者有其他别的写法吗?答案是有的,es6新出的promise对象已经es7的async await都可以解决这个问题,当然这里先介绍promise对象,es7的async await将在后边的文章中分享。下边将来介绍Promise对象。

二、简介

Promise,他是一个对象,是用来处理异步操作的,可以让我们写异步调用的时候写起来更加优雅,更加美观便于阅读。顾名思义为承诺、许诺的意思,意思是使用了Promise之后他肯定会给我们答复,无论成功或者失败都会给我们一个答复,所以我们就不用担心他跑了哈哈。所以,Promise有三种状态:pending(进行中),resolved(完成),rejected(失败)。只有异步返回的结构可以改变其状态。所以,promise的过程一般只有两种:pending->resolved或者pending->rejected。

promise对象还有一个比较常用的then方法,用来执行回调函数,then方法接受两个参数,第一个是成功的resolved的回调,另一个是失败rejected的回调,第二个失败的回调参数可选。并且then方法里也可以返回promise对象,这样就可以链式调用了。接下来上代码:

var Pro = function (time) {   //返回一个Promise对象   return new Promise(function (resolve, reject) {    console.log('123');    //模拟接口调用    setTimeout(function () {     //这里告诉Promise 成功了,然后去执行then方法的第一个函数     resolve('成功返回');    }, time);   })  };  (function(){   console.log('start');   Pro(3000)   .then(function(data){    console.log(data);    return Pro(5000);})   .then(function(data){    console.log(data);    console.log('end');   })  })();

登录后复制

上边代码中,定义了一个Pro变量,然后把一个匿名函数赋给他,函数返回一个Promise对象,然后对象里边接收一个函数,分别把resolve跟reject方法当参数传进去,用setTimeOut来模拟异步请求,当执行resolve方法后就会调用then方法的一个函数。结果如下:

js中promise实例解析

三、Promise 的api 

1、Promise.resolve()
2、Promise.reject()
3、Promise.prototype.then()
4、Promise.prototype.catch()
5、Promise.all() // 所有的都有完成,相当于 且
6、Promise.race() // 完成一个即可,相当于 或

1、Promise.resolve()的作用将现有对象转为Promise对象resolvedl;Promise.resolve(‘test’)==new Promise(resolve=>resolve(‘test’))

2、Promise.reject()也是返回一个Promise对象,状态为rejected;

3、then方法上边已经做介绍,这里就不再介绍。

4、catch():发生错误的回调函数。

5、Promise.all()适合用于所有的结果都完成了才去执行then()成功的操作。举个例子:

let p1 =new Promise(function(resolve,reject){   resolve(1);  });  let p2 = new Promise(function(resolve,reject){   resolve(2);  });  let p3 = new Promise(function(resolve,reject){   resolve(3);  });  Promise.all([p1, p2, p3]).then(function (results) {   console.log('success:'+results);  }).catch(function(r){   console.log("error");   console.log(r);  });

登录后复制

最后输出:

js中promise实例解析

6、Promise.race()的作用也是同时执行多个实例,只要有一个实例改变状态,Promise就改为那个实例所改变的状态;

四、例子

var Pro = function () {   //返回一个Promise对象   return new Promise(function (resolve, reject) {    //模拟接口调用    setTimeout(function () {     resolve(true);    }, 1000);   })  };  var Pro2 = function () {   //返回一个Promise对象   return new Promise(function (resolve, reject) {    //模拟接口调用    setTimeout(function () {     resolve('Pro2成功执行');    }, 1000);   })  };    Pro().then(function(data){   var val = data;   console.log(val)   if (val) {    console.log(1111)    return Pro2()   }     }).then(function(data1){   console.log(data1)  })

登录后复制

输出:

js中promise实例解析

这样就可以用then方法可以实现链式调用了。

相关推荐:

ES6 Promise 扩展always方法实例详解

jQuery的Promise如何正确使用

promsie.all和promise顺序执行详解

以上就是js中promise实例解析的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2787495.html

(0)
上一篇 2025年3月8日 18:08:30
下一篇 2025年3月8日 18:08:44

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS实现的双色球功能代码分享

    本文主要和大家介绍原生js实现的双色球功能,涉及javascript随机数生成及数值运算相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 先来看看运行效果: 具体代码如下: nbsp;html>    www.jb51.net …

    2025年3月8日
    200
  • JavaScript中六种错误类型分享

    js中的控制台的报错信息主要分为两大类,第一类是语法错误,这一类错误在预解析的过程中如果遇到,就会导致整个js文件都无法执行。另一类错误统称为异常,这一类的错误会导致在错误出现的那一行之后的代码无法执行,但在那一行之前的代码不会受到影响。 …

    编程技术 2025年3月8日
    200
  • JavaScript实现焦点进入文本框内关闭输入法代码分享

    本文主要和大家分享js实现焦点进入文本框内关闭输入法,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。 js实现焦点进入文本框内关闭输入法:imeMode 要用到的东西: imeMode:xxx 有四个参数 …

    编程技术 2025年3月8日
    200
  • vue构建多页面应用实例代码分享

    最近一直在研究使用vue做出来一些东西,但都是spa的单页面应用,但实际工作中,单页面并不一定符合业务需求,所以这篇我就来说说怎么开发多页面的vue应用,以及在这个过程会遇到的问题。本文主要和大家介绍用vue构建多页面应用的示例代码,小编觉…

    2025年3月8日
    200
  • JavaScript本地图片预览功能的方法

    本文主要和大家介绍javascript实现图片本地预览功能,针对非ie浏览器的html5滤镜功能及ie浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下,希望能帮助到大家。 实现一个在file文件域中选定图片文件…

    2025年3月8日
    200
  • JS实现父子窗口传值功能的代码

    本文主要和大家主要介绍js简单实现父子窗口传值功能,结合具体实例形式分析了javascript实现不使用iframe框架进行窗口之间简单传值的相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 父窗口页面father.html nbsp…

    编程技术 2025年3月8日
    200
  • vue.js在编写过程中出现空格不规范报错如何解决

    本文主要为大家带来一篇解决vue.js在编写过程中出现空格不规范报错的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 找到build文件夹下面的webpack.base.conf.js…

    2025年3月8日
    200
  • 原生js和canvas模拟心电图代码分享

    使用原生js+canvas制作的模拟心电图的html页面,因为和项目一起打包放到了github上,所以使用了vue.js的单页模式,实际上你不需要使用任何额外的框架和样式,也可以完成这个demo,现在让我们一起来拆解这个项目吧! 1:在页面…

    编程技术 2025年3月8日
    200
  • Vue.js项目模板如何大家图文分享

    本文主要为大家带来一篇vue.js项目模板搭建图文教程。给大家做个参考,希望能帮助到大家。 前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品。作为团队的领头人,我的首要任务就是设计 整体的架构 。一个良好的…

    2025年3月8日 编程技术
    200
  • vue基于Element构建自定义树实例方法

    做项目的时候要使用到一个自定义的树形控件来构建表格树,在github上搜了一下没有搜索到合适的(好看的)可以直接用的,查看element的组件说明时发现它的tree控件可以使用render来自定义节点样式,于是基于它封装了一个可以增、删、改…

    2025年3月8日
    200

发表回复

登录后才能评论