当我使用 Swal 时，如何在 then 语句中获取 fetch async 的值？答案

【问题标题】：How can I get the value of fetch async in then statement when I am using Swal?当我使用 Swal 时，如何在 then 语句中获取 fetch async 的值？
【发布时间】：2021-08-02 12:12:32
【问题描述】：

这是我的源代码。我正在使用sweetalert2.all.min.js 来使用swal 弹出窗口。现在我有一个问题，如何在then 语句中访问 API 端点的返回值？我也在源代码中标记了它。这是来源：

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 变量的值。

【问题讨论】：

可以在response.text()之前添加return
@MoshFeu 是的，如果我在 response.text() 方法之前返回，我可以访问任何内容。但在这种情况下，我永远无法访问“then”语句中的响应文本。你有什么想法吗？

标签： javascript asynchronous fetch sweetalert2

【解决方案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();
},

【讨论】：

虽然 async/await 是一个更清晰的语法，但它基本上是 Promise 的语法糖，所以它不能解决常规 Promise 不能解决的问题。
它有效。主要功能也是异步的。
@MoshFeu 它可以解决同样的问题并且在两行中解决这些问题时让您省去一些麻烦。在.then().then() 一周的头痛和两行async/await 之间，我选择了我的身边。
当然。我是 async await 的忠实拥护者，我只是想澄清这一点，这样 OP 就不会觉得 Promises 有问题。