JS中的回调函数,以及ES6中通过promise处理回调

news/2024/7/19 14:54:21 标签: javascript, js

简要介绍: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


http://www.niftyadmin.cn/n/1497646.html

相关文章

ES之事件绑定,解除绑定以及事件冒泡、事件捕获

绑定事件的处理方法任何元素都有事件属性,而绑定事件就是将这个事件与一个函数相连接。 ①句柄事件dom.onXXX function () {代码块} 以on开头的事件属于句柄事件兼容性非常好,但是一个事件只能绑定一个处理函数。当绑定多个时后面的会覆盖前面的。这种方…

每日问答——PMP题库训练

1. 在为一家公司开发软件时,供应商收到几个新的客户请求,这些请求都包含在系统中,软件按时交付,但因为高级管理人员认为软件不符合要求而拒收该软件。 若要避免这个问题,供应商的项目经理应该事先做什么? A…

unity多个场景切换保存数据_【转】Unity3D 场景切换与持久化简单数据储存(PlayerPrefs类)...

持久化简单的数据储存在Unity3D 中提供了一个简单有效的方法,如果之前的你做过Android的开发你会发现在Unity3D中持久化数据的储存和Android非常的想象。那么下面MOMO 将用一个简单有效的例子向大家介绍Unity3D中持久化数据。首先我们须要熟悉一下Unity3D中的Player…

机器学习中的数学-强大的矩阵奇异值分解(SVD)及其应用

版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleastgmail.com。也可以加我的微博: leftnoteasy 前言: 上一次写了关于PCA…

React06——React事件处理受控组件非受控组件函数柯里化

事件处理 通过onXxx属性指定事件处理函数(注意大小写) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)通过event.target得到发生事件的DOM元素对象 <!DOCTYPE html> <html lang"en&quo…

js 批量坐标转换经纬度_API地图坐标转化(批量转换坐标)

批量转换坐标(据说有50次/秒的限制哦)谷歌地图鼠标点击的谷歌坐标是&#xff1a;function initialize() {var myOptions {zoom: 14,center: new google.maps.LatLng(39.90861722866082, 116.39679921252446),mapTypeId: google.maps.MapTypeId.ROADMAP};var map new google.m…

Spring源码-AOP(九)-Advice排序

2019独角兽企业重金招聘Python工程师标准>>> 在使用Spring AOP时&#xff0c;有时会有在同一切入点存在多个Advice的情况出现&#xff0c;这里的多个Advice可能是不同的Advice&#xff0c;比如后置增强和环绕增强&#xff0c;也可能是多个相同的Advice&#xff0c;比…

React07——新旧生命周期

旧生命周期 新生命周期