Início / coding / Perguntas / 79490246
Accepted
volume one
Asked: 2025-03-07 01:44:04 +0800 CST

Como esperar um script externo ficar pronto no Vue 3?

  • 772

Estou tentando integrar o Google Pay como um componente em um aplicativo. Preciso carregar o arquivo Javascript do Google Pay antes de executar qualquer ação. É isso que estou fazendo:

onMounted(()=>{
  const scripts = [
    "https://pay.google.com/gp/p/js/pay.js",
  ];

  // Append the pay.js script to the <head> tag
  scripts.forEach(script => {
    let tag = document.createElement("script");
    tag.setAttribute("src", script);
    tag.setAttribute("async", true);
    
    document.head.appendChild(tag);
  });

  //Check if Google Pay exists
  function isGooglePayReady(){
    if('google' in window && Object.keys(window.google).length) {
      loadGooglePay()
    }
}

// Have to currently use a setTimeout to wait for script to load
setTimeout(()=> isGooglePayReady(), 500);

Eu configurei o tempo limite 500arbitrariamente porque não sei quanto tempo leva para o https://pay.google.com/gp/p/js/pay.jsscript carregar e ficar disponível.

Existe uma maneira melhor de esperar o script carregar e ficar pronto do que usar uma setTimeout()função?

javascript

1 respostas

  1. Best Answer

    Sim, em vez de usar setTimeout(), você pode escutar o loadevento do script para garantir que ele foi totalmente carregado antes de executar sua loadGooglePay()função.

      const scriptUrl = "https://pay.google.com/gp/p/js/pay.js";

  // Check if script already exists to avoid duplicate loading
  if (!document.querySelector(`script[src="${scriptUrl}"]`)) {
    const script = document.createElement("script");
    script.setAttribute("src", scriptUrl);
    script.setAttribute("async", true);

    script.onload = () => {
      if (window.google) {
        loadGooglePay(); // Call your Google Pay initialization function here
      }
    };

    script.onerror = () => {
      console.error("Failed to load Google Pay script.");
    };

    document.head.appendChild(script);
  } else {
    // Script already loaded, initialize immediately
    if (window.google) {
      loadGooglePay();
    }
  }
});

    Explicação:

    1. Usa o onloadevento : Isso garante que loadGooglePay()ele seja executado somente após o script ser totalmente carregado.
    2. Evita o carregamento duplicado de scripts: primeiro verifica se o script já está presente antes de adicionar um novo.
    3. Lida com erros : se o script não for carregado, ele registra uma mensagem de erro.
    4. Inicialização imediata : se o script já estiver carregado (por exemplo, devido a um hot reloading), ele será chamado loadGooglePay()imediatamente.

    Este método é mais confiável setTimeout()e garante que o script seja carregado apenas uma vez, melhorando a eficiência

    • 3

relate perguntas