Axios отключает то, что происходит дальше от действий пользователя при вызове после нажатия кнопки

Question

У меня есть следующий код, который в основном выполняет следующие действия:

Когда пользователь нажимает кнопку, закодированный текст отправляется на API, который позаботится о его декодировании.Затем декодированный текст задается как запрос по ссылке Google, которая открывается на новой вкладке.

JAVASCRIPT

// Reference:
// https://base62.io/
let message_encoded = 'T8dgcjRGkZ3aysdN'; // base62('Hello World!'')
let way = 1;

$(function () {
  $('.button_test').click(async function() {
    let url_api = 'https://api.base62.io/decode';
    let response;
    switch (way) {
        case 1: /* this works */
            response = await jQuerySyncPost(url_api, { data: message_encoded });
            break;
        case 2: /* this DOES NOT work */
            response = await fetchSyncPost(url_api, { data: message_encoded });
            break;
        case 3: /* this DOES NOT work */
            response = await axios.post(url_api, { data: message_encoded });
            break;
    }
    alert('Next, let\'s look on Google for: "' + response.data.decoded + '"');
    let message_decoded = response.data.decoded;
    let url_google = 'https://www.google.com/search?q='+encodeURIComponent(message_decoded);
    openNewTab(url_google);
  });
});
function jQuerySyncPost(url, params) {
  return new Promise((resolve, reject) => {
    $.ajax({
      type: 'POST',
      url: url,
      data: params,
      async: false,
      success: function (response) {
        response = {
          data: response
        };
        resolve(response);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        reject({
          jqXHR: jqXHR,
          textStatus: textStatus,
          errorThrown: errorThrown
        });
      }
    });
  });
}
function fetchSyncPost(url, params) {
  return new Promise((resolve, reject) => {
    let config = {
        headers: {
        'content-type': 'application/json; charset=UTF-8',
      },
      body: JSON.stringify(params),
      method: 'POST',
    };
    fetch(url, config)
      .then(response => response.json())
      .then(response => {
        let result = {
          data: response,
        };
        resolve(result);
      });
    });
}
function openNewTab(url) {
  window.open(url, '_blank');
}

HTML

<button class="button_test">Click Here</button>

CSS

.invisible {
  visibility: hidden;
}

.button_test {
  margin-left: 200px;
  margin-top: 100px;
  font-size: 50px;
}

Приведенный выше код работает нормально с вызовом jQuery Ajax (через пользовательскую функцию):

let response = await syncPost(url_api, { data: message_encoded });

Но, с другой стороны, если я использую axios, то я получаю предупреждение popup blocked в браузере, которое препятствует открытию новой вкладки:

let response = await axios.post(url_api, { data: message_encoded });

Здесьу вас есть JSFiddle: https://jsfiddle.net/otyzadju
, где { way=1 } работает, но { way=2, way=3 } нет.

В обоих случаях вызов API через Ajax выполняется синхронно, нопроблема в том, что axios отключает то, что происходит после действия пользователя при вызове после нажатия кнопки.

Любая идея о том, как заставить это работать с axios?

ЕслиВозможно, пожалуйста, предоставьте свое решение по разветвленной JSFiddle ссылке.

Спасибо!

Answer 1

Я изменил ответ на window.open, чтобы он работал с axios.post - он также работает и с fetch. Если вы по какой-то причине не использовали его изначально, сообщите мне, и я постараюсь обновить ответ.

function openNewTab(url) {
      window.open(url, '_blank')

}

Это вилка JSfiddle с установленным параметром 2 и измененной функцией opennewtab.

https://jsfiddle.net/xuywfqzn/