未能从 API 获取数据后未显示错误 div答案

【问题标题】：Error div not showing after failing to fetch data from API未能从 API 获取数据后未显示错误 div
【发布时间】：2021-03-13 04:53:54
【问题描述】：

所以我有这个网页，其中有一个 input 字段。用户可以输入输入，然后通过AJAX post method 提交表单。然后使用用户输入从post 端点中的API 获取数据。 API 返回一些数据，然后将其发送到前端，我可以在 success 方法内的 AJAX 块中访问它，然后在网页上呈现。现在一切正常。

当 post 端点未能从 API 获取数据时，就会出现问题。后端点的catch block 运行，但它不会在网页上显示基于error flash message 的connect-flash-plus。它只是redirects 到页面。

此时请注意，在我未使用任何 AJAX 表单提交方法的应用程序的其他页面上，Flash 消息非常适用。所以我认为这是因为 AJAX。

这是 HTML：

<!-- ERROR SECTION  -->

<form id="form">
        <input type="text" id="inlineFormInputName2" required >
        <button type="submit" class="submit">Submit</button>
</form>

<% if(error && error.length > 0){ %>
        <div class="error-container boxshadow w-100 mb-5">
                <div class="alert alert-danger">
                        <strong>Error:</strong> <%= error %>
                </div>
        </div>
<% } %>

这些是GET 和POST 端点：

router.get("/example", async (req, res) => {

    try{
        res.locals.title = "Example";
        res.render( "../views/example" );
    }catch(err) {
        req.flash("error", "Unable to retrieve data. Please try again!");
        res.redirect("/example");
    }
    
});


router.post("/example", async (req, res) => {
    try{
        const query     = req.body.name;
        const url       = `https://api.example.com/${query}?key=${process.env.API_KEY}`;
        const response  = await axios.get(url);

        if( response.status === 200 ) {

            return res.json({ 
                data: response.data
            });
        
        }

    }catch(err) {
        console.log(err)
        req.flash("error", "Unable to retrieve data. Please try again!");
        res.redirect("/example");
    }
});

这是main.js 文件中的AJAX 代码：

$(#form).submit( e => {

        e.preventDefault();
        const formInput = $('#inlineFormInputName2');
        const name = formInput.val();

        $.ajax({
            type: "POST",
            url: '/example',
            dataType: 'json',
            data: { 
                "name": name
            },
            beforeSend: function () { 
                $('.loader-container').removeClass('hidden');
            },
            success: function (data) {
                console.log(data)
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('1: ', jqXHR)
                console.log('2: ', textStatus)
                console.log('3: ', errorThrown)
                $('.loader-container').addClass('hidden');
                $('section .error-container').removeClass('hidden');
            },
            complete: function () { 
                $('.loader-container').addClass('hidden');
            }
        });
    });

更新：

当我使用 catch 块时，我必须删除连接 flash 消息并创建 res.json() 作为错误消息。然后可以在成功方法中的 ajax 调用中访问它。我不知道为什么，但它可以在成功方法而不是错误方法中访问。

【问题讨论】：

请确认您是否期待这一行 "req.flash("error", "Unable to retrieve data. Please try again!");"在网页上为您显示错误。
@AkshayAggarwal 你好。是的。这就是我在应用程序的其他页面中使用的，它可以工作并且没有 AJAX 表单提交。
stackoverflow.com/questions/39669520/… 请参考这个可能对你有帮助。
@AkshayAggarwal 嘿，我在此处发布之前已经尝试过该解决方案。它只是行不通。我已经删除了 req.flash 消息。并在 catch 块中放置一个简单的 console.log() 。我在 ajax 调用中添加了 error: function () {} 方法，并在那里放置了一个 console.log()。但我总是从 catch 块 console.log() 得到输出。
我自己修好了。当我使用 catch 块时，我需要 res.json() 错误消息，并且可以在成功方法中的 ajax 调用中访问。我不知道为什么，但它可以在成功方法而不是错误方法中访问。

标签： jquery node.js ajax express ejs

【解决方案1】：

当我使用 catch 块时，我必须删除连接 flash 消息并创建 res.json() 作为错误消息。然后可以在成功方法而不是错误方法中的 ajax 调用中访问它。

【讨论】：