Início / user-1774037

volume one's questions

Martin Hope
volume one
Asked: 2025-03-09 20:26:09 +0800 CST
  • 3

Acho que entendi async/await, mas estou confuso com uma parte que alcancei no meu código em um cenário muito comum.

Tenho uma função async createOrder()que processa pedidos. Antes que essa função retorne quaisquer valores, ela precisa executar outra função async para enviar confirmação por e-mail sendEmail().

Não quero esperar o e-mail ser enviado para retornar os detalhes do pedido ao cliente.

Então foi assim que eu fiz:

async function createOrder(){

try {
  //Create the order object 
  const order = {
        productid: 1234
        name: "helpful text"
        price: "55.00"
  }

  sendEmail(order); // I dont want to await this

  return {
    order // Client needs this ASAP without waiting for email to be sent
  }
}
catch (e) {
  console.error(e);
}

}

A função de e-mail envia o e-mail:

async function sendEmail(payload){

try {
   await axios.post('/emailer/send', {
       payload
   });

}
catch(e){
  console.error(e);
}
}

Minha pergunta é que meu IDE me dá um aviso que eu não usei awaitao chamar a sendEmail()função. É apenas uma sugestão ou há algo fundamentalmente errado com minha abordagem? Se eu estiver errado, então qual é a melhor maneira de fazer isso?

javascript
Martin Hope
volume one
Asked: 2025-03-07 01:44:04 +0800 CST
  • 5

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
Martin Hope
volume one
Asked: 2024-11-28 21:25:26 +0800 CST
  • 5

Um aplicativo tem alguns botões em uma tela que devem executar funções diferentes quando clicados. É mais ou menos assim:

<template>
<ul>
<li v-for="MenuItem in MenuItems">
  <button type="button" @click.prevent="handleClick({Function: MenuItem.Function.Name, Params: MenuItem.Function.Params })">
              {{ MenuItem.Label }}
  </button>
</li>
</ul>
</template>

<script setup>
const MenuItems = [
{
              Label: `Edit`,
              Function: {
                Name: `editItem`,
                Params: {
                  ItemID: 1
                }
 },
{
              Label: `Delete`,
              Function: {
                Name: `deleteItem`,
                Params: {
                  ItemID: 1
                }
 }
]

function handleClick({Function, Params}) {
   Function.apply(Params) // throws not a function error
   eval(Function+"()")    // throws not a fuction error
}

function editItem(){
console.log(`edit item`);
}

function deleteItem(){
console.log(`about to delete item`);
}
</script>

Tudo o que quero fazer é executar o que foi passado para o Functionargumento handleClick()e também incluir o Paramsargumento como um argumento para o Functionque precisa ser executado, por exemplo editItem(1)ou deleteItem(1);

Tentando apply()e eval()parece que não funciona e gera um erro que Uncaught TypeError: Function.apply is not a function. Estou usando VueJS como framework, mas essa é realmente uma questão de Javascript.

javascript
Martin Hope
volume one
Asked: 2024-11-18 04:29:12 +0800 CST
  • 5

Tenho um componente filho dentro de um componente pai. Sempre que o componente filho é clicado, preciso aplicar uma classe chamada .selecteda ele.

Pai.vue

<template>
   <ol>
    <li v-for="(Contact, index) in Contacts">
      <Component-Contact :ref="(el) => { RefContacts[index] = el}" @click="onClick(RefContacts[index])" :Contact="Contact" @Selected="(Data) => onSelected(Data)"/>
     </li>
   </ol>

</template>
<script>
import ComponentContact from '../components/Contact.vue'
....
setup() {
const RefContacts = ref([]);

function onSelected(Contact){
  //Adds data received from child component to an array
}

onClick(el) {
 el.toggleClass('selected') // Returns error saying toggleClass is not a function!!
}

 const Contacts = ref();
 onMounted(() => {
    const Result = await axios.get(`/api/contacts`);
    Contacts.value = Result.data
}
 )

return {
  Contacts, // An array of contacts from the DB
  onSelected
}
}
</script>

Componente filho Contact.vue

<template>
 <div style="cursor: pointer" @click="onClick($el, Contact)">
  <p>{{Contact.Forename}}</p>
  <p>{{Contact.Surname}}</p>
 </div>
</template>
<script>
...
props: {
  Contact: {
    type: Object,
    required: true
   },
emits: 'Selected',
setup() {

  function onClick(el, Contact) {
   el.toggleClass('selected') // This works but I don't want to set it here in the child
   return context.emit('Selected', {
   FullName: Contact.forename + ' ' + Contact.surname
   }
 }

}
</script>

Como posso fazer o Vue aplicar a classe de .selecteddentro <Child-Component />da Parent.vueview? Quero defini-la no Parent (ou onde quer que esteja sendo usada) e então remover a classe quando o usuário terminar de fazer o que está fazendo. Sinto que isso é mais flexível do que defini-la dentro do componente filho.

vue.js