没有互联网连接时的ajax回退答案

【问题标题】：ajax fallback when no internet connection没有互联网连接时的ajax回退
【发布时间】：2018-04-01 17:29:18
【问题描述】：

以下代码向服务器提交数据。在提交到服务器之前，数据实际上存储在 localStorage 中。这是因为我要求用户能够在没有互联网连接的情况下使用我的系统。

问题是当没有互联网连接时，显然它无法将数据发布到服务器。在这种情况下我该怎么办？

$('#btnSync').on('click', function(e) {
    var my_data = {};
    var my_value = [];

    for ( var i = 0, len = localStorage.length; i < len; ++i ) {
        if((localStorage.key( i ).includes('set'))){
            var lsItems = JSON.parse(localStorage.getItem( localStorage.key( i ) ));

            allItems[localStorage.key( i )] = lsItems;
        }
    }

    $.ajax({
        url: "action.php",
        type: "POST",
        data: {'action':'btnSync','allItems':allItems},
        dataType: "json",
        success: function(data) {
            $.notify(
                {
                    message: data.message
                },
                {
                    type: data.status,
                    placement: {
                        from: "top",
                        align: "left"
                    },
                    newest_on_top: true,
                    delay: 0
                }
            );
        },
        error: function(data){
            $.notify(
                {
                    message: 'Unexpected error occured, please kindly contact System Administrator'
                },
                {
                    type: 'danger',
                    placement: {
                        from: "top",
                        align: "left"
                    },
                    newest_on_top: true,
                    delay: 0
                }
            );
        }
    });
});

【问题讨论】：

您的错误回调将被调用。为什么不为无法推送到服务器（在本地存储中）的数据维护一个单独的队列。定期检查您是否在线并重播 ajax 调用。
看看window.addEventListener('online', sendToServer) window.addEventListener('offline', alertUser)
@mode777 我将数据保存在 localStorage 中，以避免在 ajax 提交失败时丢失数据。这样至少我在localStorage中有一份数据副本。定期检查意味着使用 javascript setInterval？好像你有经验，你能详细说明一下吗？或者提供一个样本？
@4LeaveCover：不幸的是，我对这样的系统没有太多经验。然而，使用online 事件作为@Gildas，Tambo 建议似乎是一个更好的选择。只要确保你的目标浏览器[支持它](caniuse.com/#feat=online-status)。如果您将 ajax 调用序列化到本地存储（例如 url、有效负载、方法），您可以在触发 online 事件后重新发送数据
嗯.. 我想目标很简单。我没有像@Gildas.Tambo 提到的那样检查在线或离线（因为不同的浏览器对在线/离线有不同的定义），我只是使用 setInterval 运行 ajax 应该会更好。因为每当ajax连接到我的服务器时，数据都会记录在数据库中，否则数据只会保留在localStorage中直到下一个间隔。

标签： javascript jquery html ajax local-storage

【解决方案1】：

您可以使用类似的 ajax 调用检查连接/服务器是否已启动。寻找

statusCode.status == 0

出错并向用户发出无法到达目的地/Internet 故障的通知。您可以将此 ajax 调用创建为函数中的承诺，并在所有 ajax 调用之前使用它，并要求用户连接到 Internet 然后重试。

【讨论】：

这行代码应该放在哪里？是在error: function(data){if(statusCode.status==0){//notify user}}吗？
是的，错误，或者更新的代码样式失败，例如： $.post('balbal.html', {}, function(data) { // ... 我的代码 ... }) .fail(function(response) { console.log(response); });