Связанный ajax-запрос с обещанием jquery

#javascript #jquery #ajax

#javascript #jquery #ajax

Вопрос:

У меня есть следующий код. Что я делаю, так это то, что сначала я делаю ajax-запрос к первому URL. Я получаю ответ, и мне нужны некоторые данные из этого ответа. По этой причине я поместил эти данные в user объект. Этот ответ также содержит другой URL. Затем я делаю другой ajax-запрос к этому новому URL. И я получаю ответ от URL и добавляю эти данные в user объект. В последней then() функции я возвращаю user объект. Однако, когда я вызываю get().done(function(data) { console.log(data) }) , я получаю только user.data массив. Он не включает данные пользователя в первый ajax-запрос. Как я могу объединить данные из этих двух запросов и вернуть как обещание (возможно, отложенное)?

     var get = function() {
        var user = {};

        return $.ajax({
            url: 'URL',
            method: 'GET',
            type: 'JSON'
        }).then(function(user) {
            user['name'] = user.name;
            user['joined'] = user.create_at;

            return $.ajax({
                url: user.url,
                method: 'GET',
                type: 'JSON'
            });
        }).then(function(data) {
            user['data'] = data;
            return user;
        });
    },
  

Комментарии:

1. var user = {}; это user не то же самое, что user в function(user) { , и то, что вы делаете в первых двух строках этого обратного вызова, по сути, ничего не значит … переименовать var user в var anythingButUserOrDataForThatMatter

Ответ №1:

Вы можете установить context опцию $.ajax() вызовов для user object

 var get = function() {
    var user = {};

    return $.ajax({
        url: 'URL',
        method: 'GET',
        type: 'JSON',
        context: user
    }).then(function(user) {
        this['name'] = user.name;
        this['joined'] = user.create_at;

        return $.ajax({
            url: user.url,
            method: 'GET',
            type: 'JSON',
            context: this
        });
    }).then(function(data) {
        this['data'] = data;
        return this;
    });
}
  

Ответ №2:

В этой функции

 function(user) {
    user['name'] = user.name;
    user['joined'] = user.create_at;

    return $.ajax({
        url: user.url,
        method: 'GET',
        type: 'JSON'
    });
}
  

Вы создаете user переменную в локальной области функции. Поэтому, когда вы выполняете user['name'] = user.name; , в левой части назначения вы ссылаетесь не на то, var user = {} что вы определили снаружи, в самой высокой области видимости, а на локальное user .

Попробуйте назвать полученные user данные как-нибудь иначе, например userData

Ответ №3:

Введите свой второй .затем внутри first .then (привязанный к вызову $.ajax) вот так

 var get = function() {
    return $.ajax({
        url: 'URL',
        method: 'GET',
        type: 'JSON'
    }).then(function(user) {
        return $.ajax({
            url: user.url,
            method: 'GET',
            type: 'JSON'
        }).then(function(data) {
            return {
                name: user.name,
                joined: user.create_at,
                data: data
            };
        });
    });
},
  

вообще нет необходимости в каких-либо других переменных

Комментарии:

1. Я думаю, единственным недостатком является то, что если требуется несколько вызовов AJAX, вы собираетесь выполнять много ненужной вложенности?

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