임시 코드

get, post, patch, remove, render함수 만들기

const get = (url, fn) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();
  xhr.onload = () => {
    if (xhr.status === 200) {
      fn(JSON.parse(xhr.response));
    } else {
      console.error(xhr.status);
    }
  };
};
const post = (url, fn, payload) => {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify(payload));
  xhr.onload = () => {
    if (xhr.status === 201) {
      fn(JSON.parse(xhr.response));
    } else {
      console.error(xhr.status);
    }
  };
};
const patch = (url, fn, payload) => {
  const xhr = new XMLHttpRequest();
  xhr.open('PATCH', url);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify(payload));
  xhr.onload = () => {
    if (xhr.status === 200) {
      fn(JSON.parse(xhr.response));
    } else {
      console.error(xhr.status);
    }
  };
};
const remove = (url, fn) => {
  const xhr = new XMLHttpRequest();
  xhr.open('DELETE', url);
  xhr.send();
  xhr.onload = () => {
    if (xhr.status === 200) {
      fn(JSON.parse(xhr.response));
    } else {
      console.error(xhr.status);
    }
  };
};
const render = res => {
  document.querySelector('pre').textContent = JSON.stringify(res, null, 2);
};
// get('/todos', render);
// post('/todos', render, { id: 4, content: 'React', completed: false });
// patch('/todos/4', render, { completed: true });
remove('/todos/4', render);

CURD함수를 하나로 합쳐서 ajax변수에 담아 클로저 함수 만들기

const ajax = (() => {
  const request = (method, url, fn, payload) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(payload));
    xhr.onload = () => {
      if (xhr.status === 200 || xhr.status === 201) {
        fn(JSON.parse(xhr.response));
      } else {
        console.error(xhr.status);
      }
    };
  };
  return {
    get(url, fn) {
      request('GET', url, fn);
    },
    post(url, fn, payload) {
      request('POST', url, fn, payload);
    },
    patch(url, fn, payload) {
      request('PATCH', url, fn, payload);
    },
    delete(url, fn) {
      request('DELETE', url, fn);
    },
  };
})();
const render = res => {
  document.querySelector('pre').textContent = JSON.stringify(res, null, 2);
};
// ajax.get('/todos', render);
// ajax.post('/todos', render, { id: 4, content: 'React', completed: false });
// ajax.patch('/todos/4', render, { completed: true });
ajax.delete('/todos/4', render);

promise로 만들기

const ajax = (() => {
  const request = (method, url, payload) => {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify(payload));
      xhr.onload = () => {
        if (xhr.status === 200 || xhr.status === 201) {
          resolve(JSON.parse(xhr.response));
        } else {
          reject(new Error(xhr.status));
        }
      };
    });
  };
  return {
    get(url) {
      return request('GET', url);
    },
    post(url, payload) {
      return request('POST', url, payload);
    },
    patch(url, payload) {
      return request('PATCH', url, payload);
    },
    delete(url) {
      return request('DELETE', url);
    },
  };
})();
const render = res => {
  document.querySelector('pre').textContent = JSON.stringify(res, null, 2);
};
ajax
  .post('/todos', { id: 4, content: 'React', completed: false })
  // .then(res => render(res))
  .then(render)
  .catch(console.error);
// ajax.post('/todos', render, { id: 4, content: 'React', completed: false });
// ajax.patch('/todos/4', render, { completed: true });
// ajax.delete('/todos/4', render);

 const ajax = (()=> {
   const request = (requestMethod , url, fn, payload) => {
     return new Promise((resolve, reject) => {
       const xhr = new XMLHttpRequest();
       xhr.open(requestMethod, url);
       xhr.setRequestHeader('Content-Type', 'application/json');
       xhr.send(JSON.stringify(payload));
       xhr.onload = () => {
         if (xhr.status === 200 || xhr.status === 201) {
           resolve(JSON.parse(xhr.response));
         } else {
           reject(new Error(xhr.status));
         }
       };
     })
   }
 
   return {
     get(url) {
       return request('GET', url);
     },
     post(url, payload) {
       return request('POST', url, payload);
     },
     patch(url, payload) {
       return request('PATCH', url, payload);
     },
     delete(url) {
       return request('DELETE', url)
     }
   }
 })();
 
 
 const render = res => {
   document.querySelector('pre').textContent = JSON.stringify(res, null, 2);
 };
 
 // ajax.get('/todos', render);
 // ajax.post('/todos', render, { id: 4, content: 'React', complete: false} );
 // ajax.delete('/todos/4', render);
 
 // get('/todos', render);
 // post('/todos', render, { id: 4, content: 'React', complete: false });
 // remove('/todos/4', render);
 // patch('todos/4', render, {complete: true});
 
 ajax.post('/todos', { id: 4, content: 'React', complete: false}).then(render).catch(console.error);