const getData = (url) => new Promise((resolve, reject) => {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = () => {
    if (xhttp.readyState === 4 ) {
      if (xhttp.status === 200) {
        resolve(JSON.parse(xhttp.response));
      } else {
        if (xhttp.status === 404) {
           reject('404');
        }
        reject(xhttp.statusText);
      }
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
});

getData('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    appendItem(res);
    return getData('https://jsonplaceholder.typicode.com/todos/2')
    }
  )
  .catch(res => {
    console.log('top', res);
  })
  .then(res => {
    appendItem(res);
    return getData('https://jsonplaceholder.typicode.com/todos/3')
    }
  ).catch(res => {
    console.log('middle', res);
  })
  .then(res => {
    appendItem(res);
  console.log(a)
    }
  ).catch(res => {
    console.log('bottom', b)
  }).catch(res => {
    console.log('aa', c);
  }).catch(res => {
    console.log('bb');
  }).catch(res => {
    console.log('cc');
  })

const appendItem = (res) => {
     if (!res) {
      return;
    }
    const { id, title, completed } = res;
    const html = `<div class="item">
                    <div>Id: ${id}</div>
                    <div>Title: ${title}</div>
                    <div>Completed: ${completed}</div>
                  </div>`;
    const newNode = document.createElement('div');      
    newNode.innerHTML = html;
    document.querySelector('#list').appendChild(newNode);
}