Safari 和 iOS 设备上的 jQuery AJAX 错误

Question

我有一个与 Safari 和所有 iOS 设备的兼容性问题。 我为一个项目创建了这个 jQuery 代码（见下面的链接），但我不明白为什么它不能与 Safari 一起使用。 在 Chrome、Firefox、Android 上运行良好。

(function ($) {
  $.ajaxSetup({ cache: false });

  const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/';
  
  // SELECT LOCATION-SERVICE FORM

  $('.serv-select select').html(select_vars.services_select);
  $('.loc-select select').html(select_vars.locations_select);
  $('.service-location-form')
    .closest('form')
    .submit(async function (e) {
    e.preventDefault();
    
    $(this).find('.frm_message').addClass('d-none');

      var form = $(this).serializeArray(),
        service = form.find((x) => x['name'] == `item_meta[33]`).value,
        loc = form.find((x) => x['name'] == `item_meta[34]`).value,
        cat = loc + ',' + service,
        posts = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'posts-by-cat.php',
          dataType: 'json',
          data: {
            post_type: 'services',
            cat: cat,
          },
        }),
        url = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'post-link-id.php',
          dataType: 'json',
          data: {
            id: posts[0],
          },
        });
      //console.log(url);
      location.href = url;
    });
})(jQuery);

这是我从 DevConsole 得到的错误：

Unhandled Promise Rejection [object Object]
  (anonymous function) - scripts.js:21
  asyncFunctionResume
  (anonymous function)
  promiseReactionJobWithoutPromise

我该如何解决？ 一些想法？

谢谢！

Answer 1

目前，您的代码没有任何错误捕获块。

尝试将函数内容插入到try/catch块中

(function ($) {
  $.ajaxSetup({ cache: false });

  const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/';
  
  // SELECT LOCATION-SERVICE FORM

  $('.serv-select select').html(select_vars.services_select);
  $('.loc-select select').html(select_vars.locations_select);
  $('.service-location-form')
    .closest('form')
    .submit(async function (e) {
      e.preventDefault();

      try {

        $(this).find('.frm_message').addClass('d-none');

        var form = $(this).serializeArray(),
        service = form.find((x) => x['name'] == `item_meta[33]`).value,
        loc = form.find((x) => x['name'] == `item_meta[34]`).value,
        cat = loc + ',' + service,
        posts = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'posts-by-cat.php',
          dataType: 'json',
          data: {
            post_type: 'services',
            cat: cat,
          },
        }),
        url = await $.ajax({
          type: 'post',
          async: true,
          url: ajax_dir + 'post-link-id.php',
          dataType: 'json',
          data: {
            id: posts[0],
          },
        });
        //console.log(url);
        location.href = url;
      } catch(err) {
        console.log(err);
        // Handle error here. - maybe ajax fail
      }
    });
})(jQuery);

Answer 2

这是整个片段：

(function ($) {
  $.ajaxSetup({ cache: false });

  const ajax_dir = '/wp-content/plugins/oxygen-functions/assets/ajax/'; 
  // SELECT LOCATION-SERVICE FORM

  $('.serv-select select').html(select_vars.services_select);
  $('.loc-select select').html(select_vars.locations_select);

  var closestForm = $('.service-location-form').closest('form');

  closestForm.submit(async function (e) {
    e.preventDefault();
    e.stopImmediatePropagation(); // <-- I fixed my issue with it

    $(this).find('.frm_message').addClass('d-none');

    var form = $(this).serializeArray();
    var service = form.find((x) => x['name'] == `item_meta[33]`).value;
    var loc = form.find((x) => x['name'] == `item_meta[34]`).value;
    var cat = loc + ',' + service;
    try {
      var posts = await $.ajax({
        type: 'post',
        async: true, // true was a string
        url: ajax_dir + 'posts-by-cat.php',
        dataType: 'json',
        data: {
          post_type: 'services',
          cat: cat,
        },
      });
    } catch (safariError) {
      console.error(safariError);
    }

    var url = await $.ajax({
      type: 'post',
      async: true, // also was 'true'
      url: ajax_dir + 'post-link-id.php',
      dataType: 'json',
      data: {
        id: posts[0],
      },
    });

    //console.log(url);
    location.href = url;
  });
})(jQuery);