zepto $.ajax()返回的XHR对象 promise接口总结

2024年4月4日 280次阅读 来源: wfc_666

zepto 的promise回调接口一共四个方法，分别是：

xhr.done(function(data, status, xhr){ ... })
xhr.fail(function(xhr, errorType, error){ ... })
xhr.always(function(){ ... })
xhr.then(function(){ ... })

首先，要使用zepto 的promise方法，除了常用的 zepto外，必须在其后加载callbacks模块和deferred模块。

然后，就直接上示例代码吧，一目了然，对我来说也省时间，?

<body>
<h3>Request</h3>
</body>
<script type="text/javascript" src="lib/zepto1.1.6.js"></script>
<script type="text/javascript" src="lib/callbacks.min.js"></script>
<script type="text/javascript" src="lib/deferred.min.js"></script>
<script>
var send = function () {
  var defer = $.Deferred()
  $.ajax({
    url: '',
    success: function (callback) {
      if (callback.code === 0) {
        defer.resolve(callback)
      } else {
        defer.reject(callback)
      }
    },
    error: function (err) {
      defer.reject(err)
    }
  })
  return defer.promise()
}
document.querySelector('h3').onclick = function () {
  // send().then(function (callback) {  // 接受两个函数，第一个是成功回调，即 defer.resolve(); 第二个是失败回调，即defer.reject()
  //   console.log(callback.message)
  // }, function (err) {
  //   console.log(err)
  // })
  // send().done(function (callback) {  // 接受一个函数，成功回调，即 defer.resolve();
  //   console.log(callback)
  // })
  // send().fail(function (callback) {  // 接受一个函数，失败回调，即 defer.reject();
  //   console.log(callback)
  // })
  send().always(function (callback) {  // 接受的函数个数不限，每个函数无论是成功回调或失败回调总是执行一个
    console.log(callback, 'success')
  }, function (err) {
    console.log(err, 'err')
  }, function (err) {
    console.log(err, 'err2')
  })
}
</script>

四种回调方法的说明都有注释，都是我自己测试得到的结果。
最后附上 zepto中文版网站

    原文作者：wfc_666
    原文地址: https://segmentfault.com/a/1190000007658683
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞