Question

我需要链接方法，检查：

4。 Javascript chaining methods and processing time

但与我的相似。这是我的情况：

我有两种方法：A（），B（）。 B（）必须在A（）完成后执行。

这是我的代码： 1.index.html

$(document).ready(function(){

function A(){
    $.ajax({
        type: 'GET',
        url: "https://rickandmortyapi.com/api/character/",
        dataType: "json",
        success: function (data) {
            var results = data.results;

            $.map(results, function(v, i){
                var card = `
                <div class="card" id="${v.id}">
                <img class="card-img-top" src="${v.image}" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">${v.name}</h5>
                  <p class="card-text">${v.gender}</p>
                  <p class="card-epi">...</p>
                </div>
              </div>
                `;

                $(".movies").append(card);
            });


        },
        error: function(data){

        }
    });
}

function B(){
    $.ajax({
        type: 'GET',
        url: "https://rickandmortyapi.com/api/episode",
        dataType: "json",
        success: function (data) {
            var results = data.results;

            $.map(results, function(v, i){
                $("#"+v.id).find(".card-epi").text(v.name)
            });
        },
        error: function(data){
            console.log("errors in B()", data);
        }
    });
}

new Promise(function(resolve, reject){
    resolve(A);
}).then(function(result){
    B();
});
// A();
// B();
});

的index.html

  <!DOCTYPE html>
      <html>

      <head>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
      </head>

      <body>
          <div class="movies card-columns">

          </div>
      </body>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
      <script src="movies.js"></script>

      </html>

我尝试使用Promise，但它对我没用。

请帮助〜！

这是JSFidlde： https://jsfiddle.net/franva/8vuussrz/

Answer 1

你几乎就在那里。只需从函数$.ajax( ... )返回A，它就会像这样工作：

function A() {
  return $.ajax( ... );
}

A()
  .then(function() {
    B();
  });

$.ajax( ... )已经在jQuery中公开了类似promise的API。因此，您应该可以直接在.then()的结果上应用A()。

Answer 2

试一试：

$(document).ready(function () {
  function A() {
    var def = $.Deferred();
    $.ajax({
      type: 'GET',
      url: "https://rickandmortyapi.com/api/character/",
      dataType: "json",
      success: function (data) {
        var results = data.results;

        $.map(results, function (v, i) {
          var card = `
                  <div class="card" id="${v.id}">
                  <img class="card-img-top" src="${v.image}" alt="Card image cap">
                  <div class="card-body">
                    <h5 class="card-title">${v.name}</h5>
                    <p class="card-text">${v.gender}</p>
                    <p class="card-epi">...</p>
                  </div>
                </div>
                  `;

          $(".movies").append(card);
          def.resolve();
        });
      },
      error: function (data) {

      }
    });
    return def.promise();
  }

  function B() {
    var def = $.Deferred();
    $.ajax({
      type: 'GET',
      url: "https://rickandmortyapi.com/api/episode",
      dataType: "json",
      success: function (data) {
        var results = data.results;

        $.map(results, function (v, i) {
          $("#" + v.id).find(".card-epi").text(v.name)
        });
        def.resolve();
      },
      error: function (data) {
        console.log("errors in B()", data);
      }
    });
    return def.promise();
  }

  A().then(function() {
    console.log('A executed');
    return B();
  }).then(function() {
    console.lob('B executed');
  });
});

Answer 3

function A(){
        return $.ajax({
            type: 'GET',
            url: "https://rickandmortyapi.com/api/character/",
            dataType: "json",
            success: function (data) {
                var results = data.results;

                ...
                ...
                ... 
            },
            error: function(data){
                ...
            }
        });
    }

function B(){
        $.ajax({
                ... 
                ... 
                ... 
            },
            error: function(data){
                ... 
            }
        });
    }

A().then(B); //Chained...

Answer 4

只需在A（）

的成功处理程序中调用B（）

Javascript链方法没有包装它们

4 个答案: