Как правильно сделать Promise?

Question

[Северное Сияние]

Есть функция foo(), в которой идет обращение через AJAX к серверу и строится select-список. Необходимо сделать так, что бы код в блоке then сработал только после того, как будет отрисован select-список.

let promise = new Promise(function (resolve, reject) {
    foo();
});
promise.then(result => {
    alert('done')
});

Я хотел resolve() поместить в foo():

function foo() {
    $.ajax({
        url: ......,
        type: 'get',
        dataType: 'json',
        data: data,
        success: function(data) {
            // ....
            resolve();
        },
        error: function(xhr, textStatus, errorThrown) {
            // ...
        }
    }
}

но возникает ошибка:

Uncaught ReferenceError: resolve is not defined

Я так понимаю, что resolve нельзя помещать во вложенную функцию? Можно как-то это исправить?

Answer 1

[Роман]

вариант 1.

let promise = new Promise(foo);
promise.then(result => {
    alert('done')
});



function foo(resolve, reject) {
    $.ajax({
        url: ......,
        type: 'get',
        dataType: 'json',
        data: data,
        success: function(data) {
            // ....
            resolve(data);
        },
        error: function(xhr, textStatus, errorThrown) {
            // ...
            reject(textStatus);
        }
    }
}

вариант 2.

let promise = new Promise(function (resolve, reject) {
    $.ajax({
        url: ......,
        type: 'get',
        dataType: 'json',
        data: data,
        success: function(data) {
            // ....
            resolve(data);
        },
        error: function(xhr, textStatus, errorThrown) {
            reject(textStatus);
        }
    }
});
promise.then(result => {
    alert('done')
});

вариант 3.

let promise = new Promise(function (resolve, reject) {
    foo(resolve, reject);
});
promise.then(result => {
    alert('done')
});



function foo(resolve, reject) {
    $.ajax({
        url: ......,
        type: 'get',
        dataType: 'json',
        data: data,
        success: function(data) {
            // ....
            resolve(data);
        },
        error: function(xhr, textStatus, errorThrown) {
            // ...
            reject(textStatus);
        }
    }
}

Comments

[Северное Сияние]

проблема в том, что foo() должна принимать аргументы... как это сделать? (

[Михаил]

Северное Сияние, тогда foo и должна возвращать Promise, как-то так:

foo.then(result => {
    alert('done')
});

function foo(url, data) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      type: 'get',
      dataType: 'json',
      data: data,
      success: function (data) {
        // ....
        resolve(data);
      },
      error: function (xhr, textStatus, errorThrown) {
        // ...
        reject(textStatus);
      },
    });
  });
}

C jquery можно так: (ajax запрос возвращает deferred object):

function foo(url, data) {
  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    data: data,
  });
}

foo.then(result => {
    alert('done')
});

[Роман]

Северное Сияние, тогда действительно вам нужен вариант от Михаил

[Северное Сияние]

Михаил, спасибо!!