const select = document.querySelector('select');

const result = document.getElementById('result');

​

let request;

let isFetching = false;

​

const render = post => {

  result.innerHTML = post.title;

};

​

const fetchPost = id => {

  return new Promise(resolve => {

    request = new XMLHttpRequest();

    request.responseType = 'json';

    request.open('GET', `https://jsonplaceholder.typicode.com/posts/${id}`, true);

    request.onload = () => {

      if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {

        resolve(request.response);

      }

    };

    request.send(null);

  });

};

​

select.addEventListener('change', e => {

  if (isFetching) {

    request.abort();

  } else {

    isFetching = true;

  }

​

  fetchPost(e.target.value).then(res => {

    isFetching = false;

    render(res);

  });

});