Я встановив ajax async: false, але не працює - javascript, jquery, ajax, jsonp

Я намагаюся отримати json з іншого домену, мій код як нижче:

var token = "";
function getData(){
console.log("get data suc");
for (var i=0; i < urls.length; i++){
var code = "http://example.com/api/"+ urls[i];
$.ajax({
async: false,
url: code,
type: "GET",
dataType: "jsonp",
success: function(data) { showData(data); },
error: function() { console.log("ajax Failed!"); },
beforeSend: setHeader,
});
}
}
function showData(data){
$("<tr></tr>").append("<td>" + data + "</td>")
.appendTo("#results");
console.log(data);
}
function setHeader(xhr) {
xhr.setRequestHeader("Authorization", token);
}

Цей результат повинен відображатися як замовлення ключа Iдав із URL-адрес масиву. наприклад: urls = [1,2,3,4] → має отримати [один, два, три, чотири] але я завжди отримую неправильний порядок! (напр .: [два, один, три, чотири] або [три, чотири, два, один]) Що трапилось? Це "async: false" не працювало? І чому?

Відповіді:

Ви використовуєте a jsonp запит, який не підтримує async:false.

За замовчуванням всі запити надсилаються асинхронно(тобто для цього встановлено значення true за замовчуванням). Якщо вам потрібні синхронні запити, встановіть цю опцію на помилковий. Міждоменні запити та dataType: "jsonp" запити не відповідають підтримка синхронної роботи. Зауважте, що синхронні запити можуть тимчасово заблокуйте браузер, відключивши будь-які дії під час запиту активний.

Так спробуй

function getData() {
function request(urls, i) {
var code = "http://example.com/api/" + urls[i];
$.ajax({
async: false,
url: code,
type: "GET",
dataType: "jsonp",
success: function (data) {
showData(data);
},
error: function () {
console.log("ajax Failed!");
},
beforeSend: setHeader,
}).always(function () {
i++;
if (i < urls.length) {
request(urls, i);
}
});
}
console.log("get data suc");
request(urls, 0);
}

Ваше припущення правильне, async: false не працює для запитів JSONP

Якщо вам справді потрібна синхронна поведінка, ви "dпотрібна послідовність запитів, коли зворотний виклик успіху з першого ініціює другий тощо. Дійсно, хоча було б краще, якби ви просто обробляли відповіді в тому порядку, в якому вони з’являються.

Наприклад, ви можете передати змінну індексу:

function getCallback(i) {
return function(data) {
showData(data, i);
};
};

...

$.ajax({
...
success: getCallback(i)
});

...

function showData(data, i){
// use "i" here to determine where to insert the record
}