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/
4 réponses
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().
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');
});
});
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...
Il suffit d'appeler B () dans le gestionnaire de réussite de A ()