async await работа по событию js

Question

Есть код, который должен обрабатываться по клику. Почему-то в моём случае fetch выдаёт результат, только в том случае если я сразу делаю вызов функции. Если же по событию 'click' или submit, функция начинает выполнение, доходит до fetch и я не получаю с него результата. Я попробовал разными способами, но я, видимо, что-то упустил. Подскажите пожалуйста, что не так!?

async function onSubmit() {
  // try{
  //   console.log('началось')
  //   onSubmitStart()
  //   form = document.querySelector('.search__form')
  //   if (form[0].value != 'react'){
  //     form[0].value = 'react'
  //   }
  //   const linkU = `https://api.nomoreparties.co/github-search?q=${form[0].value}`
  //   const response = await fetch(linkU)
  //   const data = await response.json()
  //   console.log(await data);
  //   return data
  // } catch (e) {
  //     console.error(e)
  // } finally{
  //     console.log('мы закончили')
  // }    
  try{
    console.log('start')  
    //onSubmitStart()
    form = document.querySelector('.search__form')
    if (form[0].value != 'react'){
      form[0].value = 'react'
    }
    const linkU = `https://api.nomoreparties.co/github-search?q=${form[0].value}`     
    fetch(linkU)
        .then(response => response.json())
        .then(result => console.log(result))            
  } catch (e) {
      console.log(e)
  } finally{
      console.log('мы закончили')
  }
}
//form[1].addEventListener('click', onSubmit)  
//onSubmit()
form.addEventListener('submit', onSubmit())

Answer 1

Сабмит кнопка что делает? Правильно: отправляет данные формы на сервер. Как? Явно не через аякс. Что надо делать:

Либо делать preventDefault() для события
Либо не делать кнопку сабмит, асделать обычную кнопку, раз всё равно форма формируется через аякс

form[1].addEventListener('click', onSubmit)

  
async function onSubmit(e) { 
    e.preventDefault();
    ...
}

БЛОГ НА HUSL

async await работа по событию js

Ответы (1 шт):