Javascript链方法没有包装它们

时间:2018-04-16 07:56:15

标签: javascript

我需要链接方法,检查:

1。 JavaScript Chainable Method Delimma

2。 Javascript chaining methods together

3。 Chaining methods in Javascript

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();
});
  1. 的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>
    
  2. 我尝试使用Promise,但它对我没用。

    请帮助〜!

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

4 个答案:

答案 0 :(得分:2)

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

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

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

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

答案 1 :(得分:1)

试一试:

$(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');
  });
});

答案 2 :(得分:1)

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...

答案 3 :(得分:0)

只需在A()

的成功处理程序中调用B()