svelte에서 데이터를 가져 오는 방법

이 자습서는 Svelte 응용 프로그램 내에서 API에서 데이터를 가져오고 표시하는 방법을 보여줍니다. 우리는 내장 API와 Axios 라이브러리를 모두 사용합니다.

. fetch

주요 개념 :

REST APIS : REST API (표현 상태 전송 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램이 HTTP 요청을 사용하여 데이터를 통신하고 교환 할 수 있도록 허용합니다. 주요 구성 요소에는 HTTP 방법 (Get, Post, Put, Patch, Delete), 엔드 포인트 (자원 위치 지정), 헤더 (메타 데이터) 및 요청 본문 (데이터 페이로드)이 포함됩니다.

svelte 's :

이 수명주기 후크는 구성 요소가 DOM에 장착 된 후 코드를 실행합니다. 구성 요소가 처음 렌더링 할 때 데이터를 가져 오는 데 이상적입니다.

.

• fetch API : javaScript의 내장 메소드는 http 요청을하는 약속 기반 방법을 제공합니다.

axios :
• 요청/응답 차단, 오류 처리 및 JSON 변환과 같은 기능을 제공하는 인기있는 타사 라이브러리, API 상호 작용 단순화.

  onMount() 단계 :

프로젝트 설정 :
• 를 사용하여 새로운 svelte 프로젝트를 만들고 디렉토리로 탐색하십시오. 로 종속성을 설치하고 를 사용하여 개발자 서버를 시작하십시오.

  Fetch API 접근법 : fetch()

import

• API 엔드 포인트 URL을 정의합니다 (예 : ) 반응 변수를 선언하여 페치 된 데이터를 저장하려면.

를 사용하여

요청을 요청하십시오 :

블록을 사용하여 데이터를 표시합니다

1. npx degit sveltejs/template my-svelte-app npm install axios 접근법 : npm run dev --open

<: :> axios 설치 : (참고 : 최신 릴리스에서 잠재적 인 버그로 인해 이전 버전 사용).

2. <:> axios import :

   : 를 사용하도록 함수를 수정하십시오

   • onMount 블록은 API 호출 중에 잠재적 오류를 처리합니다. svelte

   • 오류 처리 및 로딩 상태 :

     보다 강력한 응용 분야의 경우 Svelte 's const endpoint = "https://jsonplaceholder.typicode.com/posts"; 및

     블록을 사용하여 로딩 및 오류 상태를 추가하십시오.

     onMount(async () => {
       const response = await fetch(endpoint);
       const data = await response.json();
       posts = data;
     });

axios vs. fetch :

가 내장 된 반면, Axios는 내장 JSON 변환, 더 나은 오류 처리 및 요청/응답 차단과 같은 편의성을 제공합니다. 프로젝트의 요구와 복잡성에 가장 적합한 방법을 선택하십시오. fetch

이 강화 된 응답은 오류 처리 및 로딩 상태와 같은 모범 사례를 통합하여 이해하고 구현하기가 더 쉬워지는보다 완전하고 구조화 된 설명을 제공합니다.

자리 표시자를 실제 이미지 경로로 바꾸는 것을 잊지 마십시오

위 내용은 svelte에서 데이터를 가져 오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!