Méthodes Javascript Chain sans les envelopper

Question

J'ai besoin d'enchaîner les méthodes, vérifié:

1. Delimma de méthode chaînable JavaScript

2. Méthodes de chaînage Javascript ensemble

3. Méthodes de chaînage en Javascript

4. Méthodes de chaînage Javascript et temps de traitement

Mais ces questions ne sont pas similaires aux miennes. Voici ma situation:

J'ai 2 méthodes: A (), B (). B () doit être exécuté après la fin de A ().

Voici mon code:

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>

J'ai essayé d'utiliser Promise, mais cela ne fonctionne pas pour moi.

Voici le JSFidlde: https://jsfiddle.net/franva/8vuussrz/

javascript

0

Franva 16 avril 2018 à 10:56

Answer 1

Tu y es presque. Renvoyez simplement le $.ajax( ... ) de votre fonction A et cela fonctionnera comme ceci:

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

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

$.ajax( ... ) expose déjà une API de type promesse dans jQuery. Vous devriez donc pouvoir appliquer directement .then() sur le résultat de A().

2

31piy 16 avril 2018 à 08:02

Answer 2

Essayez-le:

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

1

aaron.xiao 16 avril 2018 à 08:03

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

1

Muhammad Faizan 16 avril 2018 à 08:07

Answer 4

Il suffit d'appeler B () dans le gestionnaire de réussite de A ()

0

b3nc1 16 avril 2018 à 08:01

Méthodes Javascript Chain sans les envelopper

4 réponses

Questions connexes

De nouvelles questions

javascript