Вы неправильно используете Ajax. Идея состоит в том, чтобы он не возвращал ничего, а вместо этого передавал данные так называемой функции обратного вызова, которая обрабатывает данные.

То есть:

function handleData( responseData ) {

    // Do what you want with the data
    console.log(responseData);
}

$.ajax({
    url: "hi.php",
    ...
    success: function ( data, status, XHR ) {
        handleData(data);
    }
});

Возврат чего-либо в обработчике отправки ничего не даст. Вместо этого вы должны либо передать данные, либо делать с ними все, что хотите, непосредственно внутри функции успеха.

Я отвечу ужасно нарисованным от руки комиксом. Второе изображение - причина, по которой result undefined в вашем примере кода.

Самое простое решение - создать функцию JavaScript и вызвать ее для обратного вызова Ajax success.

function callServerAsync(){
    $.ajax({
        url: '...',
        success: function(response) {

            successCallback(response);
        }
    });
}

function successCallback(responseObj){
    // Do something like read the response and show data
    alert(JSON.stringify(responseObj)); // Only applicable to a JSON response
}

function foo(callback) {

    $.ajax({
        url: '...',
        success: function(response) {
           return callback(null, response);
        }
    });
}

var result = foo(function(err, result){
          if (!err)
           console.log(result);
});

Угловой 1

Люди, использующие AngularJS, могут справиться с этой ситуацией с помощью обещаний.

Здесь говорится:

Промисы могут использоваться для отмены вложенности асинхронных функций и позволяют объединять несколько функций в цепочку.

Вы также можете найти хорошее объяснение здесь.

Пример из упомянутой ниже документации.

  promiseB = promiseA.then(
    function onSuccess(result) {
      return result + 1;
    }
    ,function onError(err) {
      // Handle error
    }
  );

 // promiseB will be resolved immediately after promiseA is resolved
 // and its value will be the result of promiseA incremented by 1.

Angular 2 и новее

В Angular 2 посмотрите на следующий пример, но его рекомендуется для использования наблюдаемых с Angular 2.

 search(term: string) {
     return this.http
       .get(`https://api.spotify.com/v1/search?q=${term}&type=artist`)
       .map((response) => response.json())
       .toPromise();
}

Вы можете потреблять это таким образом,

search() {
    this.searchService.search(this.searchField.value)
      .then((result) => {
    this.result = result.artists.items;
  })
  .catch((error) => console.error(error));
}

См. оригинал здесь. Но TypeScript не поддерживает собственные обещания ES6, если вы хотите его использовать, вам может потребоваться плагин для этого.

Кроме того, здесь представлена ​​спецификация обещаний.

Большинство ответов здесь дают полезные предложения, когда у вас есть одна асинхронная операция, но иногда это возникает, когда вам нужно выполнить асинхронную операцию для каждой записи в массиве или другой структуре, подобной списку. . Соблазн сделать так:

// WRONG
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log(results); // E.g., using them, returning them, etc.

Пример:

// WRONG
var theArray = [1, 2, 3];
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log("Results:", results); // E.g., using them, returning them, etc.

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

Причина, по которой это не работает, заключается в том, что обратные вызовы от doSomethingAsync еще не запущены к тому моменту, когда вы пытаетесь использовать результаты.

Итак, если у вас есть массив (или какой-то список) и вы хотите выполнять асинхронные операции для каждой записи, у вас есть два варианта: выполнять операции параллельно (с перекрытием) или последовательно (одна за другой по порядку).

Параллельный

Вы можете запустить их все и отслеживать, сколько обратных вызовов вы ожидаете, а затем использовать результаты, когда вы получили такое количество обратных вызовов:

var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

Пример:

var theArray = [1, 2, 3];
var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", JSON.stringify(results)); // E.g., using the results
        }
    });
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

(Мы могли бы покончить с expecting и просто использовать results.length === theArray.length, но это оставляет нас открытыми для возможности того, что theArray будет изменен, пока вызовы еще не завершены ...)

Обратите внимание, как мы используем index из forEach для сохранения результата в results в той же позиции, что и запись, к которой он относится, даже если результаты приходят не по порядку (поскольку асинхронные вызовы не обязательно завершаются в том порядке, в котором они были запущены ).

Но что, если вам нужно вернуть эти результаты из функции? Как указывали другие ответы, вы не можете; ваша функция должна принимать и вызывать обратный вызов (или возвращать Обещание). Вот версия обратного вызова:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

Пример:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

Или вот версия, возвращающая вместо этого Promise:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Конечно, если doSomethingAsync передавал нам ошибки, мы использовали бы reject, чтобы отклонить обещание, когда мы получим ошибку.)

Пример:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

(Или, как вариант, вы можете создать оболочку для doSomethingAsync, которая возвращает обещание, а затем выполнить следующее ...)

Если doSomethingAsync дает вам обещание, вы можете используйте Promise.all:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry);
    }));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Если вы знаете, что doSomethingAsync проигнорирует второй и третий аргумент, вы можете просто передать его напрямую map (map вызывает свой обратный вызов с тремя аргументами, но большинство людей большую часть времени используют только первый):

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Пример:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(doSomethingAsync));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper { max-height: 100% !important; }

Обратите внимание, что Promise.all разрешает свое обещание с помощью массива результатов всех обещаний, которые вы даете ему, когда все они разрешены, или отклоняет свое обещание, когда первое из обещаний, которые вы ему даете, отклоняется.

Серии

Предположим, вы не хотите, чтобы операции выполнялись параллельно? Если вы хотите запускать их один за другим, вам нужно дождаться завершения каждой операции, прежде чем начинать следующую. Вот пример функции, которая делает это и вызывает обратный вызов с результатом:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

(Поскольку мы выполняем работу последовательно, мы можем просто использовать results.push(result), так как мы знаем, что не получим результатов не по порядку. В приведенном выше примере мы могли использовать results[index] = result;, но в некоторых из следующих примеров мы не у меня нет индекса для использования.)

Пример:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper { max-height: 100% !important; }

(Или, опять же, создайте оболочку для doSomethingAsync, которая дает вам обещание, и выполните следующие действия ...)

Если doSomethingAsync дает вам обещание, если вы можете использовать синтаксис ES2017 + (возможно, с помощью транспилятора, такого как Babel), вы можете использовать _ 41_ функция с _ 42_ и _ 43_:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

Пример:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper { max-height: 100% !important; }

Если вы не можете использовать синтаксис ES2017 + (пока), вы можете использовать вариант Шаблон сокращения Promise (это сложнее, чем обычное сокращение Promise, потому что мы не передаем результат от одного к другому, а вместо этого собираем их результаты в массив):

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

Пример:

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper { max-height: 100% !important; }

... что менее громоздко с ES2015 + стрелочные функции :

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", JSON.stringify(results));
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper { max-height: 100% !important; }

Взгляните на этот пример:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

    var getJoke = function(){
        return $http.get('http://api.icndb.com/jokes/random').then(function(res){
            return res.data.value;  
        });
    }

    getJoke().then(function(res) {
        console.log(res.joke);
    });
});

Как видите, getJoke возвращает разрешенное обещание (оно разрешается при возврате res.data.value). Итак, вы ждете завершения запроса $ http.get, а затем выполняется console.log (res.joke) (как обычный асинхронный поток).

Это plnkr:

http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg/

Способ ES6 (асинхронный - ожидание)

(function(){
  async function getJoke(){
    let response = await fetch('http://api.icndb.com/jokes/random');
    let data = await response.json();
    return data.value;
  }

  getJoke().then((joke) => {
    console.log(joke);
  });
})();

Это одно из мест, где двусторонняя привязка данных или концепция хранилища, которые используются во многих новых фреймворках JavaScript, отлично подойдут вам ...

Итак, если вы используете Angular, React или любые другие фреймворки, которые поддерживают двустороннюю привязку данных или концепцию хранения, эта проблема просто решена для вас, поэтому в простыми словами, ваш результат undefined на первом этапе, поэтому вы получили result = undefined до того, как получите данные, затем, как только вы получите результат, он будет обновлен и ему будет присвоено новое значение, которое ответ вашего Ajax-вызова. ..

Но как вы можете сделать это на чистом JavaScript или jQuery, например, как вы задали в этом вопросе?

Вы можете использовать обратный вызов, обещание и недавно наблюдаемое, чтобы обработать это за вас. Например, в обещаниях у нас есть функция типа success() или then(), которая будет выполнена, когда ваши данные будут готовы для вас. То же самое с обратным вызовом или функцией subscribe для наблюдаемого объекта.

Например, в вашем случае, когда вы используете jQuery, вы можете сделать что-то вроде этого:

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); // After we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); // fooDone has the data and console.log it
    };

    foo(); // The call happens here
});

Для получения дополнительной информации изучите обещания и наблюдаемые объекты, которые являются более новыми способами выполнения асинхронных задач.

Это очень распространенная проблема, с которой мы сталкиваемся, борясь с «загадками» JavaScript. Позвольте мне сегодня попытаться развенчать эту тайну.

Начнем с простой функции JavaScript:

function foo(){
    // Do something
    return 'wohoo';
}

let bar = foo(); // 'bar' is 'wohoo' here

Это простой синхронный вызов функции (где каждая строка кода «завершает свою работу» перед следующей по порядку), и результат такой же, как и ожидалось.

Теперь давайте добавим небольшой поворот, введя небольшую задержку в нашу функцию, чтобы все строки кода не были «закончены» последовательно. Таким образом, он будет имитировать асинхронное поведение функции:

function foo(){
    setTimeout( ()=> {
        return 'wohoo';
   }, 1000)
}

let bar = foo() // 'bar' is undefined here

Итак, вы идете; эта задержка просто нарушила наши ожидания! Но что именно произошло? Что ж, на самом деле это довольно логично, если вы посмотрите на код.

Функция foo() при выполнении ничего не возвращает (таким образом, возвращается значение undefined), но запускает таймер, который выполняет функцию через 1 секунду, чтобы вернуть «wohoo». Но, как вы можете видеть, значение, присвоенное bar, - это результат, который немедленно возвращается из foo (), что является ничем, то есть просто undefined.

Итак, как нам решить эту проблему?

Давайте попросим нашу функцию дать обещание. Обещание действительно о том, что оно означает: это означает, что функция гарантирует, что вы предоставите любой результат, который она получит в будущем. Итак, давайте посмотрим, как это работает для нашей небольшой проблемы, описанной выше:

function foo(){
   return new Promise((resolve, reject) => { // I want foo() to PROMISE me something
    setTimeout ( function(){
      // Promise is RESOLVED, when the execution reaches this line of code
       resolve('wohoo') // After 1 second, RESOLVE the promise with value 'wohoo'
    }, 1000 )
  })
}

let bar;
foo().then( res => {
    bar = res;
    console.log(bar) // Will print 'wohoo'
});

Таким образом, сводка такова: для решения асинхронных функций, таких как вызовы на основе Ajax и т. Д., Вы можете использовать обещание resolve значения (которое вы собираетесь вернуть). Таким образом, в асинхронных функциях вы разрешаете значение вместо возврата.

ОБНОВЛЕНИЕ (обещает с async / await)

Помимо использования then/catch для работы с обещаниями, существует еще один подход. Идея состоит в том, чтобы распознать асинхронную функцию, а затем дождаться разрешения обещаний, прежде чем перейти к следующей строке кода. Это все еще просто promises под капотом, но с другим синтаксическим подходом. Чтобы было понятнее, вы можете найти сравнение ниже:

затем / catch версия:

function saveUsers(){
     getUsers()
      .then(users => {
         saveSomewhere(users);
      })
      .catch(err => {
          console.error(err);
       })
 }

версия async / await:

  async function saveUsers(){
     try{
        let users = await getUsers()
        saveSomewhere(users);
     }
     catch(err){
        console.error(err);
     }
  }

Другой подход к возврату значения из асинхронной функции - передать объект, который будет хранить результат асинхронной функции.

Вот пример того же:

var async = require("async");

// This wires up result back to the caller
var result = {};
var asyncTasks = [];
asyncTasks.push(function(_callback){
    // some asynchronous operation
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;
            _callback();
        }
    });
});

async.parallel(asyncTasks, function(){
    // result is available after performing asynchronous operation
    console.log(result)
    console.log('Done');
});

Я использую объект result для хранения значения во время асинхронной операции. Это позволяет получить результат даже после асинхронного задания.

Я часто использую этот подход. Мне было бы интересно узнать, насколько хорошо этот подход работает, когда задействована обратная связь результата через последовательные модули.

Хотя обещания и обратные вызовы работают нормально во многих ситуациях, неприятно выражать что-то вроде:

if (!name) {
  name = async1();
}
async2(name);

Вы закончите через async1; проверьте, является ли name неопределенным или нет, и соответственно вызовите обратный вызов.

async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)

Хотя в небольших примерах это нормально, это раздражает, когда у вас много похожих случаев и задействована обработка ошибок.

Fibers помогает в решении проблемы.

var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}

Вы можете проверить проект здесь.

В следующем примере, который я написал, показано, как

• Обрабатывать асинхронные HTTP-вызовы;
• Ждать ответа от каждого вызова API;
• Используйте шаблон Promise;
• Чтобы присоединиться, используйте шаблон Promise.all множественные HTTP-вызовы;

Этот рабочий пример самодостаточен. Он будет определять простой объект запроса, который использует объект window XMLHttpRequest для выполнения вызовов. Он будет определять простую функцию для ожидания выполнения кучи обещаний.

Контекст. В этом примере выполняется запрос к конечной точке Spotify Web API для поиска playlist объектов. для заданного набора строк запроса:

[
 "search?type=playlist&q=%22doom%20metal%22",
 "search?type=playlist&q=Adele"
]

Для каждого элемента новое обещание запускает блок - ExecutionBlock, анализирует результат, планирует новый набор обещаний на основе массива результатов, который представляет собой список объектов Spotify user, и выполняет новый HTTP-вызов в ExecutionProfileBlock асинхронно.

Затем вы можете увидеть вложенную структуру Promise, которая позволяет создавать несколько и полностью асинхронных вложенных HTTP-вызовов и объединять результаты каждого подмножества вызовов через Promise.all.

ПРИМЕЧАНИЕ. Последние search API Spotify потребуют указания токена доступа в заголовках запроса:

-H "Authorization: Bearer {your access token}" 

Итак, чтобы запустить следующий пример, вам нужно поместить свой токен доступа в заголовки запроса:

var spotifyAccessToken = "YourSpotifyAccessToken";
var console = {
    log: function(s) {
        document.getElementById("console").innerHTML += s + "<br/>"
    }
}

// Simple XMLHttpRequest
// based on https://davidwalsh.name/xmlhttprequest
SimpleRequest = {
    call: function(what, response) {
        var request;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // Internet Explorer
            try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (e) {
                try {
                  request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }

        // State changes
        request.onreadystatechange = function() {
            if (request.readyState === 4) { // Done
                if (request.status === 200) { // Complete
                    response(request.responseText)
                }
                else
                    response();
            }
        }
        request.open('GET', what, true);
        request.setRequestHeader("Authorization", "Bearer " + spotifyAccessToken);
        request.send(null);
    }
}

//PromiseAll
var promiseAll = function(items, block, done, fail) {
    var self = this;
    var promises = [],
                   index = 0;
    items.forEach(function(item) {
        promises.push(function(item, i) {
            return new Promise(function(resolve, reject) {
                if (block) {
                    block.apply(this, [item, index, resolve, reject]);
                }
            });
        }(item, ++index))
    });
    Promise.all(promises).then(function AcceptHandler(results) {
        if (done) done(results);
    }, function ErrorHandler(error) {
        if (fail) fail(error);
    });
}; //promiseAll

// LP: deferred execution block
var ExecutionBlock = function(item, index, resolve, reject) {
    var url = "https://api.spotify.com/v1/"
    url += item;
    console.log( url )
    SimpleRequest.call(url, function(result) {
        if (result) {

            var profileUrls = JSON.parse(result).playlists.items.map(function(item, index) {
                return item.owner.href;
            })
            resolve(profileUrls);
        }
        else {
            reject(new Error("call error"));
        }
    })
}

arr = [
    "search?type=playlist&q=%22doom%20metal%22",
    "search?type=playlist&q=Adele"
]

promiseAll(arr, function(item, index, resolve, reject) {
    console.log("Making request [" + index + "]")
    ExecutionBlock(item, index, resolve, reject);
}, function(results) { // Aggregated results

    console.log("All profiles received " + results.length);
    //console.log(JSON.stringify(results[0], null, 2));

    ///// promiseall again

    var ExecutionProfileBlock = function(item, index, resolve, reject) {
        SimpleRequest.call(item, function(result) {
            if (result) {
                var obj = JSON.parse(result);
                resolve({
                    name: obj.display_name,
                    followers: obj.followers.total,
                    url: obj.href
                });
            } //result
        })
    } //ExecutionProfileBlock

    promiseAll(results[0], function(item, index, resolve, reject) {
        //console.log("Making request [" + index + "] " + item)
        ExecutionProfileBlock(item, index, resolve, reject);
    }, function(results) { // aggregated results
        console.log("All response received " + results.length);
        console.log(JSON.stringify(results, null, 2));
    }

    , function(error) { // Error
        console.log(error);
    })

    /////

  },
  function(error) { // Error
      console.log(error);
  });

<div id="console" />

Я подробно обсуждал это решение здесь.

Короткий ответ: вы должны реализовать обратный вызов следующим образом:

function callback(response) {
    // Here you can do what ever you want with the response object.
    console.log(response);
}

$.ajax({
    url: "...",
    success: callback
});

JavaScript является однопоточным.

Браузер можно разделить на три части:

1. Цикл событий

2. Веб-API

3. Очередь событий

Цикл событий работает вечно, то есть своего рода бесконечный цикл. Очередь событий - это то место, где все ваши функции помещаются в какое-либо событие (пример: щелчок).

Они по одному выводятся из очереди и помещаются в цикл событий, который выполняет эту функцию и готовится к следующей после выполнения первой. Это означает, что выполнение одной функции не начинается до тех пор, пока функция, стоящая перед ней в очереди, не будет выполнена в цикле событий.

Теперь представим, что мы поместили в очередь две функции. Один предназначен для получения данных с сервера, а другой использует эти данные. Сначала мы поместили в очередь функцию serverRequest (), а затем функцию utiliseData (). Функция serverRequest входит в цикл событий и обращается к серверу, поскольку мы никогда не знаем, сколько времени потребуется для получения данных с сервера, поэтому ожидается, что этот процесс займет время, и поэтому мы заняты циклом событий, таким образом зависая нашей страницы.

Вот тут-то и играет роль веб-API. Он берет эту функцию из цикла событий и обрабатывает сервер, освобождая цикл событий, чтобы мы могли выполнить следующую функцию из очереди.

Следующая функция в очереди - это utiliseData (), которая входит в цикл, но из-за отсутствия данных она теряется, и выполнение следующей функции продолжается до конца очереди. (Это называется асинхронным вызовом, т.е. мы можем делать что-то еще, пока не получим данные.)

Предположим, наша функция serverRequest () имеет в коде оператор возврата. Когда мы получаем данные от веб-API сервера, он помещает их в очередь в конце очереди.

Поскольку он помещается в конец очереди, мы не можем использовать его данные, поскольку в нашей очереди не осталось никаких функций для использования этих данных. Таким образом, невозможно вернуть что-либо из асинхронного вызова.

Таким образом, решением этого является обратный вызов или обещание.

• изображение из один из ответов здесь правильно объясняет использование обратного вызова ... *

Мы передаем нашу функцию (функцию, использующую данные, возвращаемые сервером) функции, вызывающей сервер.

function doAjax(callbackFunc, method, url) {
    var xmlHttpReq = new XMLHttpRequest();
    xmlHttpReq.open(method, url);
    xmlHttpReq.onreadystatechange = function() {

        if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
            callbackFunc(xmlHttpReq.responseText);
        }
    }
    xmlHttpReq.send(null);
}

В моем коде это называется:

function loadMyJson(categoryValue){
    if(categoryValue === "veg")
        doAjax(print, "GET", "http://localhost:3004/vegetables");
    else if(categoryValue === "fruits")
        doAjax(print, "GET", "http://localhost:3004/fruits");
    else
      console.log("Data not found");
}

обратный вызов JavaScript.info

Ответ 2017: теперь вы можете делать именно то, что хотите, в любом текущем браузере и Node.js

Это довольно просто:

• Вернуть обещание
• Используйте 'await', который сообщить JavaScript, чтобы он ожидал преобразования обещания в значение (например, HTTP-ответ)
• Добавьте ключевое слово 'async' в родительская функция

Вот рабочая версия вашего кода:

(async function(){

    var response = await superagent.get('...')
    console.log(response)

})()

await поддерживается во всех текущих браузерах и Node.js 8

Вы можете использовать эту настраиваемую библиотеку (написанную с использованием Promise) для удаленного вызова.

function $http(apiConfig) {
    return new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open(apiConfig.method, apiConfig.url);
        client.send();
        client.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                // Performs the function "resolve" when this.status is equal to 2xx.
                // Your logic here.
                resolve(this.response);
            }
            else {
                // Performs the function "reject" when this.status is different than 2xx.
                reject(this.statusText);
            }
        };
        client.onerror = function () {
            reject(this.statusText);
        };
    });
}

Простой пример использования:

$http({
    method: 'get',
    url: 'google.com'
}).then(function(response) {
    console.log(response);
}, function(error) {
    console.log(error)
});

Другое решение - выполнить код через последовательный исполнитель nsynjs.

Если основная функция обещана

nsynjs последовательно оценит все обещания и поместит результат обещания в свойство data:

function synchronousCode() {

    var getURL = function(url) {
        return window.fetch(url).data.text().data;
    };
    
    var url = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js';
    console.log('received bytes:',getURL(url).length);
    
};

nsynjs.run(synchronousCode,{},function(){
    console.log('synchronousCode done');
});

<script src="https://rawgit.com/amaksr/nsynjs/master/nsynjs.js"></script>

Если основная функция не обещана

Шаг 1. Оберните функцию с обратным вызовом в оболочку с поддержкой nsynjs (если у нее есть обещанная версия, вы можете пропустить этот шаг):

var ajaxGet = function (ctx,url) {
    var res = {};
    var ex;
    $.ajax(url)
    .done(function (data) {
        res.data = data;
    })
    .fail(function(e) {
        ex = e;
    })
    .always(function() {
        ctx.resume(ex);
    });
    return res;
};
ajaxGet.nsynjsHasCallback = true;

Шаг 2. Включите синхронную логику:

function process() {
    console.log('got data:', ajaxGet(nsynjsCtx, "data/file1.json").data);
}

Шаг 3. Запускаем функцию синхронно через nsynjs:

nsynjs.run(process,this,function () {
    console.log("synchronous function finished");
});

Nsynjs будет оценивать все операторы и выражения шаг за шагом, приостанавливая выполнение в случае, если результат какой-либо медленной функции не готов.

Другие примеры можно найти здесь.

В ECMAScript 6 есть «генераторы», которые позволяют легко программировать в асинхронном стиле.

function* myGenerator() {
    const callback = yield;
    let [response] = yield $.ajax("https://stackoverflow.com", {complete: callback});
    console.log("response is:", response);

    // examples of other things you can do
    yield setTimeout(callback, 1000);
    console.log("it delayed for 1000ms");
    while (response.statusText === "error") {
        [response] = yield* anotherGenerator();
    }
}

Чтобы запустить приведенный выше код, сделайте следующее:

const gen = myGenerator(); // Create generator
gen.next(); // Start it
gen.next((...args) => gen.next([...args])); // Set its callback function

Если вам нужно настроить таргетинг на браузеры, которые не поддерживают ES6, вы можете запустить код через Babel или компилятор закрытия, чтобы сгенерировать ECMAScript 5.

Обратные вызовы ...args завернуты в массив и деструктурируются, когда вы их читаете, чтобы шаблон мог справиться с обратными вызовами, имеющими несколько аргументов. Например, с узлом fs:

const [err, data] = yield fs.readFile(filePath, "utf-8", callback);

Мы попадаем во вселенную, которая, кажется, движется в измерении, которое мы называем временем. Мы действительно не понимаем, что такое время, но мы разработали абстракции и словарный запас, которые позволяют нам рассуждать и говорить о нем: прошлое, настоящее, будущее, до, после.

Компьютерные системы, которые мы создаем - все больше и больше - имеют время как важное измерение. Определенные вещи должны произойти в будущем. Затем после того, как эти первые вещи в конечном итоге произойдут, должны произойти другие вещи. Это основное понятие, называемое асинхронностью. В нашем все более и более сетевом мире наиболее распространенный случай асинхронности - это ожидание ответа какой-либо удаленной системы на какой-либо запрос.

Рассмотрим пример. Вы звоните молочнику и заказываете молока. Когда он придет, вы захотите добавить его в свой кофе. Вы не можете добавлять молоко в кофе прямо сейчас, потому что его еще нет. Вы должны дождаться его появления, прежде чем заливать его в кофе. Другими словами, следующее не сработает:

var milk = order_milk();
put_in_coffee(milk);

Поскольку JavaScript не имеет возможности узнать, что ему нужно дождаться завершения order_milk, прежде чем он выполнит put_in_coffee. Другими словами, он не знает, что order_milk является асинхронным - что-то, что не приведет к появлению молока до некоторого времени. JavaScript и другие декларативные языки выполняют одну инструкцию за другой, не дожидаясь.

Классический подход JavaScript к этой проблеме, использующий тот факт, что JavaScript поддерживает функции как объекты первого класса, которые можно передавать, заключается в передаче функции в качестве параметра в асинхронный запрос, который затем будет вызываться по завершении. его задача когда-нибудь в будущем. Это подход обратного вызова. Это выглядит так:

order_milk(put_in_coffee);

order_milk начинает, заказывает молоко, затем, когда и только когда оно приходит, вызывает put_in_coffee.

Проблема с этим подходом обратного вызова заключается в том, что он загрязняет нормальную семантику функции, сообщающей свой результат с помощью return; вместо этого функции не должны сообщать о своих результатах, вызывая обратный вызов, заданный в качестве параметра. Кроме того, этот подход может быстро стать громоздким при работе с более длинными последовательностями событий. Например, предположим, что я хочу подождать, пока в кофе добавится молоко, и только потом выполнить третий шаг, а именно выпить кофе. В итоге мне нужно написать что-то вроде этого:

order_milk(function(milk) { put_in_coffee(milk, drink_coffee); }

где я передаю put_in_coffee как молоко, которое нужно добавить, так и действие (drink_coffee), которое нужно выполнить после того, как молоко было залито. Такой код становится трудно писать, читать и отлаживать.

В этом случае мы могли бы переписать код вопроса как:

var answer;
$.ajax('/foo.json') . done(function(response) {
  callback(response.data);
});

function callback(data) {
  console.log(data);
}

Введите обещания

Это послужило мотивацией для понятия обещания, которое представляет собой особый тип значения, которое представляет собой какой-то будущий или асинхронный результат. Он может представлять что-то, что уже произошло, или что произойдет в будущем, или может никогда не произойти. У обещаний есть единственный метод с именем then, которому вы передаете действие, которое будет выполнено, когда результат, который представляет обещание, будет реализован.

В случае с молоком и кофе мы разрабатываем order_milk, чтобы возвращать обещание о прибытии молока, а затем указываем put_in_coffee как then действие, как показано ниже:

order_milk() . then(put_in_coffee)

Одним из преимуществ этого является то, что мы можем связать их вместе, чтобы создать последовательности будущих вхождений (цепочка):

order_milk() . then(put_in_coffee) . then(drink_coffee)

Применим обещания к вашей конкретной проблеме. Мы заключим нашу логику запроса в функцию, которая возвращает обещание:

function get_data() {
  return $.ajax('/foo.json');
}

Фактически, все, что мы сделали, это добавили return к вызову $.ajax. Это работает, потому что jQuery $.ajax уже возвращает что-то вроде обещания. (На практике, не вдаваясь в подробности, мы бы предпочли обернуть этот вызов, чтобы вернуть реальное обещание, или использовать какую-нибудь альтернативу $.ajax, которая делает это.) Теперь, если мы хотим загрузить файл и дождаться его завершения а затем сделайте что-нибудь, мы можем просто сказать

get_data() . then(do_something)

например,

get_data() .
  then(function(data) { console.log(data); });

При использовании обещаний мы в конечном итоге передаем множество функций в then, поэтому часто бывает полезно использовать более компактные стрелочные функции в стиле ES6:

get_data() .
  then(data => console.log(data));

Ключевое слово async

Но все же есть что-то неутешительное в необходимости писать код одним способом, если синхронный, и совсем другим, если он асинхронный. Для синхронного пишем

a();
b();

но если a асинхронный, с обещаниями мы должны написать

a() . then(b);

Выше мы говорили, что JavaScript не может знать, что ему нужно дождаться завершения первого вызова, прежде чем он выполнит второй. Было бы неплохо, если бы был способ сообщить об этом JavaScript? Оказывается, есть ключевое слово await, используемое внутри особого типа функции, называемой асинхронной функцией. Эта функция является частью будущей версии ECMAScript (ES), но она уже доступна в транспиляторах, таких как Babel с правильными настройками. Это позволяет нам просто написать

async function morning_routine() {
  var milk   = await order_milk();
  var coffee = await put_in_coffee(milk);
  await drink(coffee);
}

В вашем случае вы могли бы написать что-то вроде

async function foo() {
  data = await get_data();
  console.log(data);
}

Краткий ответ: ваш foo() метод возвращается немедленно, а вызов $ajax() выполняется асинхронно после возврата функции. Проблема в том, как и где хранить результаты, полученные асинхронным вызовом после его возврата.

В этой ветке было дано несколько решений. Возможно, самый простой способ - передать объект методу foo() и сохранить результаты в члене этого объекта после завершения асинхронного вызова.

function foo(result) {
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;   // Store the async result
        }
    });
}

var result = { response: null };   // Object to hold the async result
foo(result);                       // Returns before the async completes

Обратите внимание, что вызов foo() по-прежнему ничего полезного не вернет. Однако результат асинхронного вызова теперь будет сохранен в result.response.

Вот несколько подходов к работе с асинхронными запросами:

1. Browser Promise
2. Q - библиотека обещаний для JavaScript
3. A + Promises.js
4. jQuery отложено
5. XMLHttpRequest API
6. Использование концепции обратного вызова - как реализация в первом ответе

Пример: отложенная реализация jQuery для работы с несколькими запросами

var App = App || {};

App = {
    getDataFromServer: function(){

      var self = this,
                 deferred = $.Deferred(),
                 requests = [];

      requests.push($.getJSON('request/ajax/url/1'));
      requests.push($.getJSON('request/ajax/url/2'));

      $.when.apply(jQuery, requests).done(function(xhrResponse) {
        return deferred.resolve(xhrResponse.result);
      });
      return deferred;
    },

    init: function(){

        this.getDataFromServer().done(_.bind(function(resp1, resp2) {

           // Do the operations which you wanted to do when you
           // get a response from Ajax, for example, log response.
        }, this));
    }
};
App.init();

Используйте callback() функцию внутри foo() успеха. Попробуйте вот так. Это просто и понятно.

var lat = "";
var lon = "";

function callback(data) {
    lat = data.lat;
    lon = data.lon;
}

function getLoc() {
    var url = "http://ip-api.com/json"
    $.getJSON(url, function(data) {
        callback(data);
    });
}

getLoc();

Использование обещания

Самый лучший ответ на этот вопрос - использовать Promise.

function ajax(method, url, params) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(this.responseText);
    };
    xhr.onerror = reject;
    xhr.open(method, url);
    xhr.send(params);
  });
}

использование

ajax("GET", "/test", "acrive=1").then(function(result) {
    // Code depending on result
})
.catch(function() {
    // An error occurred
});

Но ждать...!

Проблема с использованием обещаний!

Почему мы должны использовать наши собственные промисы?

Некоторое время я использовал это решение, пока не выяснил, что в старых браузерах есть ошибка:

Uncaught ReferenceError: Promise не определен

Поэтому я решил реализовать свой собственный класс Promise для компиляторов JavaScript от ES3 до ниже, если он не определен. Просто добавьте этот код перед основным кодом, а затем безопасно используйте Promise!

if(typeof Promise === "undefined"){
    function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
            throw new TypeError("Cannot call a class as a function");
        }
    }
    var Promise = function () {
        function Promise(main) {
            var _this = this;
            _classCallCheck(this, Promise);
            this.value = undefined;
            this.callbacks = [];
            var resolve = function resolve(resolveValue) {
                _this.value = resolveValue;
                _this.triggerCallbacks();
            };
            var reject = function reject(rejectValue) {
                _this.value = rejectValue;
                _this.triggerCallbacks();
            };
            main(resolve, reject);
        }
        Promise.prototype.then = function then(cb) {
            var _this2 = this;
            var next = new Promise(function (resolve) {
                _this2.callbacks.push(function (x) {
                    return resolve(cb(x));
                });
            });
            return next;
        };
        Promise.prototype.catch = function catch_(cb) {
            var _this2 = this;
            var next = new Promise(function (reject) {
                _this2.callbacks.push(function (x) {
                    return reject(cb(x));
                });
            });
            return next;
        };
        Promise.prototype.triggerCallbacks = function triggerCallbacks() {
            var _this3 = this;
            this.callbacks.forEach(function (cb) {
                cb(_this3.value);
            });
        };
        return Promise;
    }();
}

Вопрос был такой:

Как мне вернуть ответ от асинхронного вызова?

которые можно интерпретировать как:

Как сделать так, чтобы асинхронный код выглядел синхронным?

Решением будет избегать обратных вызовов и использовать комбинацию Promises и async / await.

Я хотел бы привести пример запроса Ajax.

(Хотя его можно написать на JavaScript, я предпочитаю писать его на Python и компилировать в JavaScript с помощью Transcrypt. Будет достаточно ясно.)

Давайте сначала включим использование jQuery, чтобы $ был доступен как S:

__pragma__ ('alias', 'S', '$')

Определите функцию, которая возвращает Promise, в данном случае вызов Ajax:

def read(url: str):
    deferred = S.Deferred()
    S.ajax({'type': "POST", 'url': url, 'data': { },
        'success': lambda d: deferred.resolve(d),
        'error': lambda e: deferred.reject(e)
    })
    return deferred.promise()

Используйте асинхронный код, как если бы он был синхронным:

async def readALot():
    try:
        result1 = await read("url_1")
        result2 = await read("url_2")
    except Exception:
        console.warn("Reading a lot failed")

Конечно, есть много подходов, таких как синхронный запрос, обещание, но по моему опыту я думаю, вам следует использовать подход обратного вызова. Асинхронное поведение JavaScript естественно.

Итак, ваш фрагмент кода можно переписать, чтобы он немного отличался:

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            myCallback(response);
        }
    });

    return result;
}

function myCallback(response) {
    // Does something.
}

Вместо того, чтобы бросать вам код, есть две концепции, которые являются ключевыми для понимания того, как JavaScript обрабатывает обратные вызовы и асинхронность (это вообще слово?)

Цикл событий и модель параллелизма

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

function foobarFunc (var) {
  console.log(anotherFunction(var));
}

function foo(bla) {
  console.log(bla)
}