Блог

Я пытаюсь отключить import_button , когда я нажимаю на него, и включить его, когда fetch это будет сделано. Я пытался сделать это следующим образом (код ниже), но, к сожалению, это не работает.

Дополнительный вопрос: могу ли я пропустить эти две строки кода let import_button = document.getElementById('import_button'); import_button.disabled = true; и сделать что-то подобное? this.disabled = true;

 <button id="import_button" onclick="fetchProducts(event);">Import</button>
 

 function fetchProducts(e) {
    e.preventDefault();
    let import_button = document.getElementById('import_button');
    import_button.disabled = true;
    
    fetch('/api/v1/products', {
        method: 'GET'
      })
      .then(response => response.json())
      .then(products => 
        import_result.innerHTML = `Updated: ${products.updated}`
      )
      .then(import_button.disabled = false)
}
 

Этот финал then все еще должен быть функцией

 .then(() => import_button.disabled = false)
 

или просто включите его в предыдущий then

 .then(products => {
    import_result.innerHTML = `Updated: ${products.updated}`;
    import_button.disabled = false
  })
 

Дополнительный вопрос: вроде того. Это цель события

 function fetchProducts(e){
  let import_button = e.target;
   console.log(import_button)
   import_button.disabled = true;  
} 

 <button id="import_button" onclick="fetchProducts(event);">Import</button> 

Так что сделай это let import_button = e.target

Вам следует рассмотреть возможность изменения отключенного состояния внутри finally , а then не для того, чтобы вы catch также могли обработать ошибку.

Вы можете сохранить ссылку на кнопку, используя this :

 function fetchProducts(e) {
    e.preventDefault();
    let import_button = this;
    
    import_button.disabled = true;
    
    fetch('/api/v1/products', {
        method: 'GET'
      })
      .then(response => response.json())
      .then(products => 
        import_result.innerHTML = `Updated: ${products.updated}`
      )
      .catch(error => console.log(error))
      .finally(() => (import_result.disabled = false))
}