fetch API를 Promise를 써 직접 맹글깡?

자바스크립트

by e7e 2024. 4. 9. 07:53

2024.01.08 - [자바스크립트] - Promise(약속) 모르면 바보옹(비동기)

글을 읽고 Promise가 맘속에 자리잡았다면, 모두가 그렇진 않겠지만

fetch를 이해하지 못할 이유를 책상아래나 모니터 뒤에선 찾을 수 없당.

사실 난 Response객체.text(), Response객체.json() 메소드가

왜 다시 Promise를 리턴하게 맹글었는지는 아직 조금 의문이당.!

바로 결과를 리턴하면 사용이 좀 더 편리하지 않았을까앙?

가독성?, 실제 Ajax 처리 타이밍이 내가 생각하고 있는 것과

많이 다를 깡? 쪼메 궁금하긴 하당 ? (짐작은 있으나 아직 확신이 없당!)

뭐 암튼 이렇게 만들지 않았을까? 하는 내 추측을 담아 fetch를

AJAX와 Promise를 이용해서 직접 일부라도 구현해 보았당.

완전한 기능을 구현하는 것은 여기선 큰 의미가 없기 때문에

get 방식 경우만 테스트해 볼 수 있는 걸 맹글어 보장!

먼저 아래처럼 맹글면 Promise로 부터 받은 것에 다시 Promise를

씌워서 원하는 모습 맹글기강 조금 난감하당. ( 이게 좋은 뎅!~~ ㅠㅠ)

  // fetch를 요렇게?
  const myFetch = function (url, opt) {
    return new Promise((res, rej) => {
      let xhr = new XMLHttpRequest();
      xhr.open(opt.method, url, true);
      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4 && xhr.status == 200) {
          res(xhr.responseText);
        }
      };
      xhr.send();
    });
  };

어쩔 수 없당. text()와 json() 메소드를 가진 객체 생성자

(class의미 function)를 아래처럼 맹글장! (Response객체 흉네)

억지로 text()와 json() 메소드를 Promise를 리턴하게 맹글었당

(일부러 new Promise를 쓰지 않았음에 잠시 주목!~~)

  // Response에 대응
  function MyResp(result) {
    this.result = result;
    this.text = function () {
      return Promise.resolve(this.result);
    };
    this.json = function () {
      return Promise.resolve(JSON.parse(this.result));
    };
  }

이제 myFetch함수의 res(resolve에 해당)에서 myResp 객체를 생성해서

넘기면 거의 fetch API와 사용법이 같아 진당.

https://koreanjson.com 의 어처구니없는 무료 API 데이터를 넣어서

then과 async/await 동작 결과까지 확인하는 전체 소스를 보장!

전체 소스

<!DOCTYPE html>
<meta charset="UTF-8" />
<script>
  // Response에 대응
  function MyResp(result) {
    this.result = result;
    this.text = function () {
      return Promise.resolve(this.result);
    };
    this.json = function () {
      return Promise.resolve(JSON.parse(this.result));
    };
  }


  /* fetch에 대응 */
  const myFetch = function (url, opt) {
    return new Promise((res, rej) => {
      let xhr = new XMLHttpRequest();
      xhr.open(opt.method, url, true);
      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4 && xhr.status == 200) {
          res(new MyResp(xhr.responseText));
        }
      };
      xhr.send();
    });
  };

  /*
     https://koreanjson.com/ 은 한국어 데이터를 제공하는 초간단 JSON API.
     방문해 보면 순식간에 알게 되는뎅, users 이외의 데이타는 다 재미가 바닥이당.
  */

  // 테스트 1  then
  myFetch("https://koreanjson.com/users", {
    method: "get",
  }).then((resp) => {
    //console.log("디버깅 MyResp:", resp);
    resp.json().then((rslt) => {
      console.log("then: ", rslt);
    });
  });

  // 테스트 2 async / await
  const test2 = async () => {
    let response = await myFetch("https://koreanjson.com/todos", {
      method: "get",
    });
    let result = await response.json();
    console.log("await: ", result);
  };
  test2();
</script>

특별한 게 없으니, 결과도 그저 기대대로 바로 나온당!.

users 10개, todos 200개 데이터가 아래처럼 잘 와 주었당!~~

단지 koreanjson.com 사이트가 데이터 주기를 가끔 거부하는 것 같당!~~ ㅋㅋ

리움이와 다림이는 서로 좋아한당.

리움이는 여자고, 다림이는 남자당.

시작이 서로 다르당.

리움이는 눈물덩어리 소녀를 단전에 숨기고 있공,

다림이는 호기심덩어리 꼬맹이를 꿈속에서 몰래 만난당.

숨기는 게 서로 다르당

다림이는 리움이와 찐친을 꿈구공,

리움이는 다림이에게 그저 감사하고 싶다.

맘의 거리가 서로 다르당

결국 다림이와 리움이는

기다림과 그리움이 되어

맘이 가려는 길이 서로 다르당

엇갈린 운명은 레이저 빗속에서

우연의 도움으로 제 자리에

돌려지기도 한당.

그리움이 숨으면 기다림도 숨는당!

리움아 아프지말공 항상 건강해!~~

https://www.youtube.com/watch?v=ATK7gAaZTOM

'자바스크립트' 카테고리의 다른 글

clipboard API 사용 복사/붙여넣기 (0)	2024.04.16
faker-js 이용 가짜(Dummy) 데이터 마궁 맹글깅 (0)	2024.04.10
Promise(약속) 모르면 바보옹(비동기) (0)	2024.01.08
외부파일 드래그 앤 드롭3 (File Drag and Drop) (2)	2023.12.20
외부파일 드래그 앤 드롭2(File Drag and Drop) (2)	2023.12.19