Как вернуть ответ на вызов AJAX (асинхронный)? Сравнить Promise, async / await, fetch

Введение

Недавно я взялся за рефакторинг модулей AMD в проекте. Простая задача - как запустить запрос и вернуть результат из модуля AMD. Мы ожидаем, что наши модули могут возвращать результат HTTP-запроса.

Я пробовал несколько способов решить эту проблему. Я могу получить только объект Promise из большинства этих методов. Я был разочарован этим.

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

Обещание + AJAX (не удалось)
async / await + AJAX (не удалось)
получить (не удалось)
AJAX без aync (успех)

Use Promise (ES6) - вы получите только объект Promise

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

var res = new Promise(function (resolve, reject) {
    $.ajax({url: resourceUrl,
        dataType: "script",
        success: function (data) {
            resolve(resources);
        },
        error: function (err) {
            reject(err);
        }
    });
});
console.log(res)
console.log(res.PromiseValue)
return res.PromiseValue // undefined

Приведенные выше операторы вернут объект Promise . PromiseValue - это внутреннее свойство, и мы не можем получить к нему доступ напрямую. Значение не определено, если вы обращаетесь к Promise.PromiseValue.

Используйте aync / await (ES7): вы также получите только объект Promise

Следующим методом, который я попробовал, было использование AJAX с async / await в качестве следующего кода. Мы по-прежнему получаем объект Promise.

const getResource = async() => {
    try {
        var res;
        await $.ajax({
            url: resourceUrl,
            dataType: "script",
            success: function (data) {
                res = resources;
            },
            error: function (err) {
                console.log(err);
            }
        });
        return res;
    } catch (err) {
        console.log(err);
    }
}
var results = await getResource()
return results.PromiseValue // undefined

Мы можем распечатать развернутое значение в операторах then. Однако мы все равно получим объект Promise, когда передадим значение из функции.

Используйте выборку: вы также получите только объект Promise

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

var res = fetch(stringsResourceUrl, {
    headers: {
        'Content-Type': 'text/javascript'
    }
}).then(resp => resp.text())
console.log(res)

мы получим тот же результат, что и в первом примере.

Используйте чистый AJAX: мы получим ответ от этого метода

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

var res = $.ajax({
    url: stringsResourceUrl,
    dataType: "script",
    success: function (data) {},
    async: false,
    error: function (err) {
        console.log(err);
    }
}).responseText;
return res;

использованная литература

Резюме

Спасибо за вашего пациента. Я Шон. Я работаю программистом.

Эта статья - моя заметка. Пожалуйста, не стесняйтесь давать мне совет, если есть ошибки. Жду ваших отзывов.

Не стесняйтесь аплодировать, если эта статья может вам помочь. Спасибо.

Вы также можете подписаться на мою страницу в Facebook.

Обыватель
Обыватель. 4 лайка. Страница с информацией о программном обеспечении, фотографиях и кофе www.facebook.com