Блог

Главная - Вопросы по программированию - Как я могу получить значение fetch async в инструкции then, когда я использую Swal?

Как я могу получить значение fetch async в инструкции then, когда я использую Swal?

#javascript #asynchronous #fetch #sweetalert2

Вопрос:

Это мой исходный код. Я использую sweetalert2.all.min.js чтобы использовать swal всплывающее окно. Теперь у меня есть вопрос, как я могу получить доступ к возвращаемому значению из конечной точки API в then инструкции? Я также отмечаю это в исходном коде. Это и есть источник:

 Swal.fire({
        title: 'Welcome',
        text: "Enter Username and Password",
        html:
            '<input id="username_input" class="swal2-input" placeholder="Enter Username">',
        input: 'password',
        inputPlaceholder: 'Enter Password',
        inputAttributes: {
            autocapitalize: 'off'
        },
        showCancelButton: false,
        confirmButtonText: 'Login',
        showLoaderOnConfirm: true,
        preConfirm: (passwordEntered) => {
            var usernameEntered = document.getElementById('username_input').value;
            return fetch("...my_endpoint.../checkusername/"   usernameEntered   "/"   passwordEntered)
                .then(response => {
                    response.text().then((val) => {
                        return val   // **: I need to get this value in * place
                    });
                })
                .catch(error => {
                    return "ERROR";
                })
        },
        allowOutsideClick: () => {
            !Swal.isLoading()
        }
    }).then((result) => {
        alert(result.value);  // *: I need to access the value from **
    })

Итак, когда я регистрирую значение результата, я получаю значение passwordEntered переменной.

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

1. Может быть, добавить return раньше response.text()

2. @MoshFeu Да, я могу получить доступ к чему угодно, если вернусь перед методом response.text (). Но в этой ситуации я никогда не смогу получить доступ к тексту ответа в заявлении «тогда». У тебя есть какие-нибудь идеи?

Ответ №1:

Отбросив .then() синтаксис и переключившись на async/await :

 preConfirm: async (passwordEntered) => {
    var usernameEntered = document.getElementById('username_input').value;

    const response = await fetch("...my_endpoint.../checkusername/"   usernameEntered   "/"   passwordEntered);
    return await response.text();
},

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

1. Хотя синтаксис async/await более понятен, это в основном синтаксический сахар обещаний, поэтому он не может решить проблему, которую не может решить обычное обещание.

2. Это работает. А также основной функцией будет асинхронность.

3. @MoshFeu Это может решить те же проблемы и избавить вас от нескольких головных болей, решая их в две строки. Между .then().then() недельной головной болью и двумя очередями async/await я выбрал свою сторону.

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

Метки: ,