logo

TechCodeview

예제를 사용하여 JavaScript에서 API 가져오기

자바스크립트fetch()>서버에서 리소스를 검색하는 데 사용되는 방법입니다. 요청에 대한 서버의 응답을 캡슐화하는 Response 객체로 해석되는 Promise를 반환합니다.fetch()>일반적으로 데이터를 가져오는 데 사용되는 GET 요청과 우편 서버에 데이터를 게시하는 데 사용되는 요청입니다.

뿐만 아니라, fetch()> 고급 기능을 완벽하게 통합 HTTP 다음과 같은 기능 CORS(교차 원본 리소스 공유) 및 기타 확장 기능을 통해 향상된 보안 및 상호 운용성을 통해 웹 개발 경험을 풍부하게 할 수 있습니다.



참고: Fetch API는 다양한 소스에서 데이터를 가져오는 데 사용되는 fetch() 메서드와 함께 제공됩니다.

통사론:

마크 저커버그 교육 
fetch('url') // api for the get request .then(response =>response.json()) .then(data => console.log(data));>

매개변수:



  • URL: 요청이 이루어질 URL입니다.
  • 옵션: 속성의 배열입니다. 이것은 선택 과목 매개변수. 사용 가능한 옵션은 다음과 같습니다.
    • 방법: 요청에 대한 HTTP 방법을 지정합니다. (GET, POST, PUT 또는 DELETE 가능)
    • 헤더
    • 몸: 요청과 함께 전송될 데이터입니다.
    • 방법: 요청 모드를 지정합니다(예: 코르스, nocors, 동일 출처 등)
    • 신임장 : 요청과 함께 사용자 자격 증명(쿠키, 인증 헤더 등)을 보낼지 여부를 지정합니다.

JavaScript fetch() 메서드 예

fetch 메소드의 몇 가지 예를 살펴보겠습니다. 이 예제는 JavaScript의 fetch 메소드에 대한 완전한 이해를 제공합니다.

1 . 가져오기를 사용하여 요청 가져오기

이 예에서는 fetch 메서드에서 Get 요청을 만드는 방법을 보여줍니다.

메모: 옵션이 없으면 Fetch는 항상 가져오기 요청으로 작동합니다.



자바스크립트 
// API for get requests let fetchRes = fetch( 'https://jsonplaceholder.typicode.com/todos/1');   // FetchRes is the promise to resolve // it by using.then() method fetchRes.then(res =>res.json()).then(d => { console.log(d) })>

산출:

설명:

  1. JS fetch() 함수는 URL https://jsonplaceholder.typicode.com/todos/1에 GET 요청을 보내는 데 사용됩니다. 이 함수는 요청에 대한 응답을 나타내는 Response 객체로 해석되는 Promise를 반환합니다.
  2. then() 메서드는 응답을 비동기적으로 처리하기 위해 fetch() 호출에 연결됩니다. then()에 전달된 콜백 함수 내에서 res.json() 메서드가 호출되어 응답 본문을 JSON으로 구문 분석합니다. 이 메서드는 또한 구문 분석된 JSON 데이터를 확인하는 Promise를 반환합니다.
  3. 또 다른 then() 메소드는 구문 분석된 JSON 데이터를 처리하기 위해 연결됩니다. 콜백 함수 내에서 구문 분석된 JSON 데이터 d는 console.log()를 사용하여 콘솔에 기록됩니다.

2 . 가져오기를 사용하여 JSON 데이터 게시

이 예에서는 JavaScript의 fetch() API를 사용하여 JSON 데이터를 업로드했습니다. 요청 본문을 JSON 문자열화된 데이터 버전으로 설정하고 적절한 헤더를 설정하여 JSON을 보내고 있음을 나타낼 수 있습니다.

아래 옵션을 제공하여 가져오기를 사용하여 게시 요청을 수행할 수 있습니다.

let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }>

post 요청의 구문을 확인한 후 fetch 메소드에서 post 요청을 사용하는 방법을 보여주는 아래 예제를 살펴보세요.

자바스크립트 
// Your JSON data const jsonData = { key1: 'value1', key2: 'value2' }; // Set up options for the fetch request const options = {  method: 'POST',  headers: {  'Content-Type': 'application/json' // Set content type to JSON  },  body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body }; // Make the fetch request with the provided options fetch('https://api.example.com/upload', options)  .then(response =>{ // 요청이 성공했는지 확인합니다. if (!response.ok) { throw new Error('네트워크 응답이 좋지 않았습니다');  } // 응답을 JSON으로 구문 분석합니다. return response.json();  }) .then(data => { // JSON 데이터를 처리합니다. console.log(data); }) .catch(error => { // 가져오는 동안 발생한 오류를 처리합니다. console.error('Fetch error: ', 오류) });>

설명:

  • 우리는 귀하의 JSON 데이터를 정의합니다.
  • 'POST'로 설정된 메서드, 'application/json'으로 설정된 Content-Type 헤더, JSON 문자열 버전의 데이터로 설정된 본문을 포함하여 가져오기 요청에 대한 옵션을 설정합니다.
  • fetch() 함수를 사용하여 제공된 옵션으로 가져오기 요청을 합니다.
  • 나머지 코드는 이전과 동일하게 유지되어 가져오는 동안 발생하는 응답 및 오류를 처리합니다.

삼. 가져오기 요청 중단

당신은 사용할 수 있습니다 중단 컨트롤러 그리고 AbortSignal 인터페이스 JavaScript에서 가져오기 요청을 중단합니다.

자바스크립트 
// Create a new AbortController instance const controller = new AbortController(); const signal = controller.signal; // Make the fetch request with the signal const fetchPromise = fetch('https://api.example.com/data', { signal }); // Timeout after 5 seconds const timeoutId = setTimeout(() =>{ 컨트롤러.중단(); // 가져오기 요청 중단 console.log('가져오기 요청 시간 초과'); }, 5000); // 가져오기 요청 처리 fetchPromise .then(response => { // 요청이 성공했는지 확인 if (!response.ok) { throw new Error('Network response was not ok'); } // 구문 분석 response as JSON return response.json(); }) .then(data => { // JSON 데이터를 처리합니다. console.log(data); }) .catch(error => { // 도중에 발생한 오류를 처리합니다. fetch console.error('Fetch error:', error); }) .finally(() => {clearTimeout(timeoutId); // 시간 초과 지우기 });>

설명:

  • 새로운 AbortController 인스턴스를 생성하고 해당 신호를 얻습니다.
  • 제공된 옵션과 함께 fetch()를 사용하여 가져오기 요청을 수행합니다.
  • 너무 오래 걸리는 경우 가져오기 요청을 중단하기 위해 setTimeout()을 사용하여 시간 제한을 5초로 설정했습니다.
  • 시간 초과 콜백 내에서 컨트롤러.abort()를 호출하여 가져오기 요청을 중단합니다.
  • 응답 구문 분석 및 오류 처리를 포함하여 평소대로 가져오기 요청을 처리합니다.
  • 마지막으로 finally() 블록에서는 제한 시간이 만료되기 전에 가져오기 요청이 완료되는 경우 제한 시간이 트리거되는 것을 방지하기 위해clearTimeout()을 사용하여 시간 제한을 지웁니다.

자격 증명을 포함하여 요청 보내기

다음과 같은 자격 증명을 포함하는 요청을 보내려면 쿠키 , 가져오기 요청에서 포함할 자격 증명 속성을 설정할 수 있습니다.

fetch('https://example.com', { credentials: 'include', });>

요청 URL이 호출 스크립트와 동일한 출처에 있는 경우에만 자격 증명을 보내려면 자격 증명: 'same-origin'을 추가하세요.

// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });>

JavaScript fetch() 메소드 사용 사례

다음은 fetch 메소드의 사용 사례 중 일부입니다. 이는 초보 개발자가 가져오기 작업을 할 때 직면하는 일반적인 문제입니다.

1. JavaScript Fetch API를 사용하여 데이터를 가져오는 방법

JavaScript Get 요청은 서버에서 데이터를 검색하는 데 사용됩니다. JavaScript에서 Fetch API를 사용하여 서버에서 데이터를 가져오려면 원하는 URL에 GET 요청을 하고 응답을 처리하면 됩니다.

2. Fetch API를 사용한 Get 및 Post 메서드

fetch() 메소드는 다음과 같은 모든 유형의 요청에 사용할 수 있습니다. 우편 , 얻다 , 놓다, 그리고 삭제 , GET 메소드는 fetch API를 사용합니다.

삼. http 요청을 위한 Fetch와 Axios의 차이점

Axios는 쉽게 설치할 수 있는 독립형 타사 패키지이며 Fetch는 대부분의 최신 브라우저에 내장되어 있습니다. 설치가 필요하지 않습니다.

지원되는 브라우저:

SQL 카운트 고유

자바스크립트 가져오기는 ECMAScript6(ES6) 기능은 다음과 같은 거의 모든 최신 브라우저에서 지원됩니다.

  • 구글 크롬
  • 가장자리
  • 파이어폭스
  • 오페라
  • 원정 여행