Home / Questions / 3582
Accepted
Alvaro Montoro
Asked: 2020-02-03 14:53:15 +0800 CST 2020-02-03 14:53:15 +0800 CST

嵌套 AJAX 和 Promise 的区别

  • 772

嵌套 AJAX 调用在另一个西班牙语 StackOverflow问题中被引用，答案建议使用promises而不是嵌套 AJAX 调用。从那里我有一些疑问。

注意：我将通过删除相当多的参数并重命名函数以使其更易于阅读来使用 jQuery 表示法。这并不意味着这个问题是关于 jQuery 中的 jQuery 或 AJAX。

基本上问题是这样的：

结构A

$.ajax({
    url: URL1,
    success: function() {
        a1();
        $.ajax({
            url: URL2,
            success: function() {
                a2();
            },
            error: function() {
                b2();
            }
        });
    },
    error: function() {
        b1();
    }
});

答案中的建议是这样的：

结构B

var promise = $.ajax({
    url: URL1,
    success: function() {
        a1();
    },
    error: function() {
        b1();
    }
});

promise.then(function() { 
    $.ajax({
        url: URL2,
        success: function() {
            a2();
        },
        error: function() {
            b2();
        }
    });
});

现在我的问题：

  • 结构A和B是否等效？它们之间有什么区别？
  • 使用一个比另一个有优势吗？
  • 是否推荐其中一种方法而不是另一种方法？
javascript

2 Answers

  1. Best Answer

    区别在于易于维护和错误处理。调试也容易得多。

    Promise 允许你在你的方法中保持不变性，从函数式编程中派生出来，而使用回调则更加必要。

    它的另一个优点是promise是 JS 原生的，与Jquery option 不同，它是一个标准。

    它还可以防止您逃离回调地狱 XD 在此处输入图像描述

    关于您在问题中提到的结构，我会稍微修改承诺部分，使其等效。

    new Promise(function(resolve, reject) {
      $.ajax({
          url: URL1,
          success: function(data) { // si recibo algún dato como parametro
            resolve(data); //Resuelvo la promesa (la cumplo) y con esto se puede recibir como parámetro 
            a1();
          },
          error: function(CausaDelError) {
            reject(CausaDelError); //marco la promesa como incumplida y paso como parámetro el porque no se cumplió
            b1();
          };
        })
        .then(function() { //Notese que no necesito declarar la variable
          $.ajax({
            url: URL2,
            success: function() {
              a2();
            },
            error: function() {
              b2();
            }
          });
        })
        .catch(function(error) {
          //Capturo los errores posibles en la primer promesa o en la segunda (then)
          console.log(error);
        });

    Udacity 有一个非常简短的免费课程，可以非常简单快速地解释承诺

    • 17

  2. 这不能回答您的三个问题中的任何一个，但作为替代方案，这里有一个相对较新的原生 JavaScript 工具Fetch API，它可能需要针对某些浏览器的polyfill并使用 Promises。

    const url 		= 'https://api.myjson.com/bins/3ko1q',
      method 	= 'GET',
      headers   = new Headers({'Content-Type' : 'application/json'});
      
const req = new Request(url, { method, headers });

fetch(req)
  .then( res => res.ok ? res.json() : undefined )
  .then( data => JSON.stringify(data) )
  .then(alert)
  .catch(console.error.bind(console));

    • 4