JS中的回调函数,以及ES6中通过promise处理回调_js在函数回调内resolve_I have a lemon的博客-程序员宝宝

技术标签: 笔记  前端  js  javascript  

简要介绍:ES6中,可以通过promise来处理回调函数,回调函数经常用于异步操作中,间接来说,可以通过promise优化异步操作。

1.什么是JS中的回调函数?

回调函数是作为参数传递给另外一个函数,并且改回调函数在函数主体执行完后再执行。举例来说:

function callback(m,n){
 alert("我是回调函数,我在执行");
 return m+n
}

function myFunction(callback){
   var m=1;
   var n=2;
   return callback(1,2);
}

上述就是一个回调函数的例子,callback为回调函数,我们来看函数myFunction的执行过程,先执行函数的主体,最后再执行回调函数callback。

2.常见的回调函数以及存在的缺陷

(1)常见回调:

我们在jquery的ajax请求中,可以看到回调的身影,比如:

ajax({
 url:'...',
 method:'get',
 success:function(json){
    //这里就是一个回调

 }
})

经典的封装后的ajax请求就是一个,success后面所跟的函数就是一个回调函数。

(2)存在问题

因为JS是异步的,通过回调函数异步操作,会造成回调函数的嵌套,很影响代码的可读性,下面来看回调函数嵌套的情况。

ajax({
 url:'...',
 method:'get',
 success:function(json){
    //这里是一个回调
    ajax(function(json){
     //这是一个回调函数的嵌套
    });
 }
})

上述我们看到,当最外层请求成功之时,会调用第一个回调函数,而第一个回调函数里面又嵌套了第二个异步的回调函数,如此层层嵌套,代码的可读性大大的下降。

3.promise处理回调嵌套

(1)什么是promise

promise通常用于处理函数的异步调用,通过链式调用的方式,使得代码更加直观,举例来说:

var myPromise=function(tag){

  return new Promise(function(resolve,reject){
    if(tag){
      resolve('默认参数success');
    }else{
      reject('默认参数filed');
    }
})
}

myPromise(true).then(function(message){
  console.log(message)
})  //"输出默认参数success"

我们可以看到设置promise只要new Promise()就可以,并且接受一个函数,该函数里面会执行resolve()方法,表示异步调用成功时执行,reject()表示异步调用失败时候调用。

在链式调用时候,then后面接的第一个函数为成功之时调用的函数——resolve,并且这里的默认参数等同于promise中resolve中的初始参数。

(2)then和catch

then:可以在promise中实现链式调用,在上文中已经介绍。补充,then里面的第二个函数,为异步调用失败之时执行,接上面的例子:

myPromise(false).then(null,function(err){
  console.log(err)
})
//这样会输出"默认参数filed"

catch:catch方法,相当于then(null,function(err){console.log(err)}失败方法调用的一个缩写。

myPromise(false).catch(function(err){console.log(err)})
//这句话与上面等价,也会输出"默认参数filed"

(3)Promise.all

Promise.all 可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回。

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["Hello", "World"]
});

4.总结
Promise在定义的时候,在new的时候就会执行一次,因此如果要构造ajax请求可以在new Promise里传递的这个函数内进行,在定义这个构造Promise的函数里面,可以判断什么时候是执行resolve,什么时候执行reject。

原文链接:https://blog.csdn.net/liwusen/article/details/54142748

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_37483148/article/details/114937600

智能推荐

Windows下的TCP/UDP网络调试工具-NetAssist以及Linux下的nc网络调试工具-程序员宝宝

Windows下的TCP/UDP网络调试工具-NetAssist以及Linux下的nc网络调试工具Windows下的TCP/UDP网络调试工具-NetAssist以及Linux下的nc网络调试工具一、Windows下的网络调试工具-NetAssist1、TCP服务端和客户端测试2、UDP服务端和客户端测试二、Linux下的网络调试命令工具-1、什么是nc2、nc的作用3、在CentOS7中安装命令工具4、NetCat 官方地址:http://netcat.sourceforge.net/,如

Ubuntu使用sudo apt-get upgrade升级软件出现问题后的处理_apt-get upgrade后如何取消_Mr_yangsir的博客-程序员宝宝

不知道什么时候一不小心使用sudo apt-get update更新软件列表,使用sudo apt-get upgrade升级软件有时会导致一些问题,也可能因为多内核导致的。出现若如下问题:导致我在安装软件时一直无法安装,连卸载内核等也无法卸载。经过几番折腾,找到如下方法:1.$ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info_...

如何调整 Kubernetes 资源限制_新钛云服的博客-程序员宝宝

新钛云服已为您服务1438天Kubernetes 资源限制往往是一个难以调整的配置,因为你必须在太严格或者太宽松的限制之间找到最佳的平衡点。通过本文,你可以学习到如何设置正确的 Kubernetes 资源限制:从检测到无限制的容器,到找出你应该在集群中正确配置的 Kubernetes 资源限制。我们假设你使用 Prometheus 来监控你的 Kubernetes 集群。...

给无耻的国产流氓软件蜕皮教程(华军软件园)_lovedeadyou的博客-程序员宝宝

给无耻的国产流氓软件蜕皮教程   若问流氓何处寻? http://www.onlinedown.net/soft/45370.htm 华军软件走一遭。 安装结束改主页, 强制流氓全家桶, 其目录中删净后, 运行还有礼物赠, 点完1号点2号,

gcc 编译报错-Werror=_-werror=format=_fenfen8818的博客-程序员宝宝

1. misleading-indentation259 if (ret < 0)260 return ret;261262 printk(KERN_ERR"%X\n", reg_val);259:10: error: this ‘if’ ...

随便推点

Vue 中的图片加载(采坑)_AvatarGiser的博客-程序员宝宝

1、importimport remarkIcon from './redflag.png';L.icon 中使用 iconUrl 用 import 的图片let icon = L.icon({ iconUrl: remarkIcon, iconSize: [16, 16]});2、require<img :src="require('./redflag.png')" alt="">3、urlcss 使用 url.remar...

Oracle 安装OEM 报错: 无法对所有EM 相关账户解锁 解决方法_oracle 安装报没解锁全部_jjwspj的博客-程序员宝宝

本本上的Oracle 版本是11.2.0.1的。 之前安装的时候没有安装OEM,今天在用dbca 安装的时候报错,错误界面如下:  之前有整理过一篇OEM 重建的方法:Oracle OEM 重建http://blog.csdn.net/tianlesoftware/article/details/4702978  执行如下

tb文件 vivado_Vivado FPGA设计基础操作流程:Vivado的基本使用_weixin_39983563的博客-程序员宝宝

Vivado FPGA 设计基础操作流程当然在介绍的过程当中会给大家推荐一些对于工具深入使用的Xilinx官网资料。这里以流水灯的控制为例。Vivado的基本使用(一) 打开Vivado新建工程:1. 安装好Vivado之后,在Windows系统Start > All Progr ams > Xilinx Design Tools > Vivado> Vivado,或者...

2.学习Camera之——Linux驱动基础_linux camera驱动开发_来自南陵县的平头哥的博客-程序员宝宝

Linux的三大类驱动:STM32裸机开发与嵌入式Linux开发的一些区别:嵌入式Linux的开发方式与STM32裸机开发的方式有点不一样。在STM32的裸机开发中,驱动层与应用层的区分可能没有那么明显,常常都杂揉在一起。当然,有些很有水平的裸机程序分层分得还是很明显的。但是,在嵌入式Linux中,驱动和应用的分层是特别明显的,最直观的感受就是驱动程序是一个.c文件里,应用程序是另一个.c文件。比如我们这个hello驱动实验中,我们的驱动程序为hello_drv.c...

python实现——ASCII谢尔宾斯基地毯_python 谢尔宾斯基地毯_Ma Sizhou的博客-程序员宝宝

目录一、题目内容:二、思路:三、python代码:4、总结一、题目内容:二、思路:看到这个图案,肯定是自相似的,所以肯定用递归解决这个问题。但是具体怎样的呢?(1)这个其实就是二维矩阵,所以是要判断每个位置是不是要填给定字符,如果确定了每个位置填或不填,那不就解决问题了嘛;(2)用两个for循环不就遍历了所有的位置了么,所以这个也简单,现在的难点在于如何知道每个位置要填,所以用一个函数判断;(3)这个判断的函数需要三个参数,一个是边长数,另外两个是坐标。边界条件是n=1就返回T.

Verilog pcie_can_root.xdc_博客 verilog的can通信代码_老皮芽子的博客-程序员宝宝

采用 FPGA + SJA1000 实现 PCIe to CANFPGA 约束文件。Xilinx Vivado: pcie_can_root.xdc

推荐文章

热门文章

相关标签