如何实现类似jquery的'success'和'failure'函数来链接回调

Question

我是javascript的新手,我需要链接函数执行,但功能对成功和失败的反应不同.函数数组是作为参数得到的,前面的结果是成功时链中的下一个输入参数,在错误情况下我可以定义一些警报/日志行为.我喜欢jquery如何获得GET ajax方法的成功和失败.如何使内部函数触发那些事件,如何在javascript中实现？

Answer 1

这里有两个解决方案的现场演示(点击).

承诺现在被认为是最好的方法,而不是回调.我将从回调开始,因为他们更容易开始并在之后谈论承诺.

使用对象参数的基本回调:

//change this to true or false to make the function "succeed" or "fail"
//var flag = false;
var flag = true;

//this is the function that uses "success" and "error"
function foo(params) {
  //some condition to determine success or failure
  if (flag) {
    //call the success function from the passed in object
    params.success();
  }
  else {
    //call the error function from the passed in object
    params.error();
  }
}

//function "foo" is called, passing in an object with success and error functions
foo({
  success: function() {
    console.log('success!');
  },
  error: function() {
    console.log('error!');
  }
});

确保在触发之前传入回调:

对于完整的解决方案,您还需要在调用它们之前确保这些属性存在 - 只有在传入成功和错误函数时才调用它们.

这是我将如何做到这一点:

if (flag) {
  //the function is only fired if it exists
  params.success && params.success();
}

作为单个参数传递的回调:

您不必在对象中传递它们.您可以让函数接受单个参数:

function foo(success, error) {
  if (flag) {
    success && success();
  }
  else {
    error && error();
  }
}

foo(
  function() {
    console.log('success!');
  }, 
  function() {
    console.log('error!');
  }
);

单独或在对象中传递的回调:

您还可以让函数根据传入的内容使用对象中的各个参数或函数.您只需检查第一个参数是函数还是对象并相应地使用它:

function foo(success, error) {
  if (arguments.length === 1 && typeof arguments[0] === 'object') {
    var params = arguments[0];
    success = params.success;
    error = params.error;
  }
  if(flag) {
    success && success();
  }
  else {
    error && error();
  }
}

foo(function() {
  console.log('success');
});

foo({
  success: function() {
    console.log('success!');
  }
});

承诺!好哇!

正如我所说的,我更喜欢使用promises,它非常适合处理异步函数.这将需要一个promise库或ES6 JavaScript.这就是jQuery的外观.大多数库类似:

function bar() {
  var deferred = new $.Deferred();

  if (flag) {
    //if you resolve then, the first "then" function will fire
    deferred.resolve();
  }
  else {
    //if you reject it, the second "then" function will fire
    deferred.reject();
  }

  return deferred.promise();
}

//since "bar" returns a promise, you can attach a "then" function to it
//the first function will fire when the promise is resolved
//the second function will fire when the promise is rejected
bar().then(function() {
  console.log('bar success!'); 
}, 
function() {
  console.log('bar error!');
});

使用JavaScript ES6承诺:

function bar() {
  return new Promise(function(resolve, reject) {
    if (flag) {
      resolve()
    }
    else {
      reject();
    }
  })
}

承诺起初可能难以理解.有很多很好的教程可以帮助你绕过它们.