내가 지난주에 배운:fetch () 개술

신용: 이 글은 내가 Flatiron School에서 배운 자바스크립트를 바탕으로 한다.
먼저, Fetch API가 무엇인지 이해하려면 Fetch API가 무엇인지 알아야 합니다.기술적 측면에서Fetch API는 비동기적으로 자원을 얻는 인터페이스(네트워크를 포함)를 제공했다.

기억해라, anAPI (Application Programming Interface)은 컴퓨터 사이나 컴퓨터 프로그램 사이의 연결이다.그것은 다른 소프트웨어에 서비스를 제공하는 소프트웨어 인터페이스이다.

FetchAPI는 브라우저에 '마이크로 차원' 을 만들고 다시 다른 단계로 자원을 가져올 수 있도록 합니다.나는 이것이 이해하기 어려운 견해라는 것을 알고 있지만, 이 유형은 내가 추상적인 방식으로 API를 사고하는 데 도움을 준다.
중요했어
Fetch는 모든 브라우저가 사용할 수 있는 것은 아니지만 대부분의 브라우저가 사용할 수 있는 API입니다.내가 보기에 이 API는 브라우저에서 사용할 수 있어서 비동기 코드를 작성할 수 있다. 이것이 바로 자바스크립트가 이렇게 강한 이유이다.브라우저 호환성을 확인하려면 here을 클릭합니다.

브라우저에서 만들어진 이 미시적 차원에서 실제로 무슨 일이 일어났는지 이야기해 봅시다.우리가 브라우저를 사용하여 여러 가지 조작을 할 수 있는 것처럼, 우리는 이 새로 만든 차원에서 URL을 사용하여 사이트를 방문할 수 있다.네가 해야 할 첫 번째 일은 URL을 매개 변수로 전송하는 것이다. 이것은 필수적이다.
다음 코드는 브라우저에 "헤이, 나를 여기로 데려와."라고 알려 줍니다.이것은 HTTPprotocol를 사용하여 네트워크 요청을 보내는 것을 통해 이를 실현한다.fetch("https://www.startrek.com/")HTTP는 HTML 문서와 같은 에셋을 가져올 수 있는 프로토콜입니다.이것은 웹상의 모든 데이터 교환의 기초이며 클라이언트-서버 프로토콜이다. 이것은 요청을 받는 사람이 시작하는 것을 의미하며 보통 웹 브라우저이다.
위의 예를 토대로 API 포트에 접근하고 싶다고 가정해 봅시다. 포트에는 '스타크래프트' 시리즈의 행성 목록이 포함되어 있습니다.

fetch("https://www.startrek.com/planets")
.then(planets => {
      /* Do work with returned planets */
})

fetch() URL을 매개 변수로 받아들이고 이 방법에 연결된 것은 .then()에 대한 호출이고 이 호출은 약속을 되돌려줍니다.Promise 대상은 비동기 작업의 최종 완성(또는 실패)과 그 결과 값을 나타낸다.

aPromise는 약속을 만들 때 알 수 없는 값을 의미한다는 것을 기억하세요.그리고 그 중 한 주에만 존재하겠다고 약속했다.
미정: 초기 상태, 만족도 거절도 하지 않습니다.
완료됨: 작업이 성공적으로 완료되었음을 나타냅니다.
거부: 작업에 장애가 발생했음을 나타냅니다.

그렇다면 이 모든 것은 무엇을 의미하는가?이것은 프로미스가 object라는 것을 의미하며 최종적으로 완성될 비동기 계산을 나타낸다.이렇게 하면 우리는 계산이 완성되기를 기다릴 필요가 없다.반대로 우리는 여러 개의 약속을 만들 수 있다. 이 약속들은 서로 다른 일을 할 수 있고, 우리는 완성된 후에 결과를 처리할 수 있다.

우리는 이미 약간의 이해fetch()를 했고 asynchronous programming에 긁었다. 쌍관어의 뜻은 없었다.스타크래프트의 예로 돌아가서 서로 다른 기술을 조합합시다.
우선, 나는 연습separation of concerns을 하고 formData 변수에 저장된 대상을 만들 것이다.이 대상은 우리가 한 요청에 여러 개의 정보를 보내는 것을 허락한다.이 대상을 살짝 사용할 것입니다. 중요한 것은 문자열이 아니기 때문에 formData configObj 의 바디 속성에 값을 부여할 수 없다는 것을 기억하십시오.

let formData = {
  planetName: "Vulcan",
  planetRegion: "40 Eridani,"
};

내가 방금 말한 바와 같이 fetch()의 강력한 기능을 빌려 우리는 데이터를 검색할 수 있을 뿐만 아니라 이를 변이하고 삭제할 수 있다.HTTP는 지정된 리소스에 대해 수행할 작업을 나타내는 그룹request methods을 정의합니다.GET, POST/PATCH 및 DELETE 등의 몇 가지 방법이 있습니다.이 예에 대해 우리는 POST을 사용할 것이다.이 방법은 실체를 지정한 자원에 제출하는 데 사용되며, 일반적으로 상태가 바뀌거나 서버에 부작용을 일으킬 수 있습니다.
다음에 retrieve 서버에서 웹 페이지나 자원을 가져오면 서버에서 검색하고 있는 내용(메타데이터)에 대한 다양한 정보를 보냅니다.그것이 사용하는 형식은 headers이라고 한다.
마지막으로, 우리는 body에 configObj 속성을 추가하고, 문자열을 그 값으로 전달해야 한다.
문자열이 아니기 때문에 formData 대상을 configObj 속성에 값으로 분배할 수 없습니다.
우리는 body를 우리에게 전달JSON.stringify()하고 단일 매개 변수로 전달body함으로써 이 문제를 해결한다.
JSON.stringify() method JavaScript 객체 또는 값을 JSON 문자열로 변환하고 대체 함수를 지정하면 대체 값을 선택할 수 있으며 대체 배열을 지정하면 지정된 속성만 포함하도록 선택할 수 있습니다.

let configObj = {
  method: "POST", // The default value is always GET
  headers: {
    "Content-Type": "application/json", // indicate what format the data being sent is in. With JavaScript's 
    "Accept": "application/json" // advertises which content types, expressed as MIME types, the client is able to understand
  },
  body: JSON.stringify(formData) /* Your data goes here */
};

마지막으로 저희configObj와 configObj가 모두 설치되어 있습니다. 저희는 지금 formData를 주목하고 스타크래프트 API 노드fetch()에 요청할 수 있습니다.

fetch("http://startrek/planets", configObj)
  .then(function(response) {
    return response.json();
  })
  .then(function(object) {
    console.log(object);
  }); 

전체 예

let formData = {
  planetName: "Vulcan",
  planetRegion: "40 Eridani,"
};

let configObj = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"
  },
  body: JSON.stringify(formData)
};

fetch("http://startrek/planets", configObj)
  .then(function(response) {
    return response.json();
  })
  .then(function(object) {
    console.log(object);
  });