Fetch API 및 ES6 생성기를 사용한 비동기 API

코어 포인트

ecmascript 6 (ES6)은 약속 및 생성기를 통한 비동기 프로그래밍을 더 잘 지원하고 원격 자원과의 통신의 기초로 XMLHTTPREQUEST를 대체하도록 설계된 Fetch API를 도입했습니다.

fetch API 메소드는 발전기와 함께 사용될 수있는 ES6 약속 객체를 반환하여 일련의 작업과 같은 복잡한 비동기 작업의 기초를 형성하며, 각 작업은 이전 작업에 의해 반환 된 값에 따라 다릅니다.
• > 발전기는 Fetch API와 함께 사용하여 긴 폴링과 같은 작업을 수행 할 수 있으며, 여기서 클라이언트는 응답을받을 때까지 서버에 요청을 지속적으로 보냅니다. 이것은 데이터가 포함되기 전에 응답을 생성하여 수행됩니다.
Fetch API 및 ES6 생성기는 또한 다중 종속성 비동기 호출을 구현하는 데 사용될 수 있으며, 각 후속 작업은 이전 작업에 의해 반환 된 값에 따라 다릅니다. 이것은 생성기 기능에 넣고 필요한 경우 실행하여 수행 할 수 있습니다.
ECMAScript 6 (일명 ECMAScript 2015 또는 ES6)은 많은 새로운 기능을 JavaScript에 제공하므로 대규모 응용 프로그램에 이상적입니다. 한 가지 기능은 약속 및 생성기를 사용하여 비동기 프로그래밍을 더 잘 지원한다는 것입니다. 다른 하나는 원격 자원과의 통신의 기초로 XMLHTTPREQUEST를 대체하도록 설계된 Fetch API의 추가입니다.
• Fetch API 메소드는 생성기와 함께 사용될 수있는 ES6 약속 객체를 반환하여 복잡한 비동기 작업의 기초를 형성합니다. 이는 일련의 비동기 작업 (각각 이전 작업에서 반환 된 값에 따라 다름)에서 최신 업데이트를 얻으려면 서버에 비동기 호출을 반복적으로 발행 해야하는 작업에 이르기까지 모든 것일 수 있습니다.
이 기사에서는 비동기 API를 구축하기 위해 생성기와 함께 Fetch API를 사용하는 방법을 배웁니다. Fetch API는 현재 Chrome, Opera, Firefox 및 Android 브라우저에서 지원됩니다. 지원되지 않는 브라우저의 경우 Github의 Polyfill을 제공합니다.
• 평소와 같이,이 기사의 코드는 기사 맨 아래의 최종 기술을 시연하여 Github 저장소에서 찾을 수 있습니다.
비동기 조작

에 발전기를 사용하십시오 팁 : 생성기의 내용과 작동 방식을 검토 해야하는 경우 다음을 확인하십시오. 그렇다면 발전기를 사용하여 비동기 작업을 어떻게 수행합니까? Generator의 작동 방식을 분석하면 답을 찾을 수 있습니다.

반복자를 구현하는 발전기 함수는 다음과 같은 구조를 갖습니다.

키워드는 결과를 반환하고 다음 번에 호출 될 때까지 반복 기능의 실행을 일시 중지 할 책임이 있습니다. 또한 다음에 부름을받을 때 모든 것을 다시 시작하는 대신 함수의 상태를 보존하고, 마지막으로 남은 곳을 효과적으로 기억합니다.

우리는 위의 기능을

루프없이 양식으로 다시 생각할 수 있습니다 :

function *myIterator(){
  while(condition){
    //计算要返回的下一个值
    yield value;
  }
}

위의 두 경우에서 함수는 동일하게 작동합니다. 키워드를 사용하는 유일한 이유는 다음 반복 (그 자체가 약간 비동기식으로 보일 때까지 함수의 실행을 일시 중지하는 것입니다. 명령문은 모든 값을 반환 할 수 있으므로 약속을 반환하고 함수가 여러 비동기 호출을 실행할 수 있습니다.

yield 페치 api 와 함께 생성기를 사용하십시오 팁 : Fetch API를 검토하려면 다음을 확인하십시오. 앞에서 언급했듯이 Fetch API는 xmlhttprequest를 대체하도록 설계되었습니다. 이 새로운 API는 HTTP 요청의 다양한 부분에 대한 제어를 제공하고 서버의 응답에 따라 구문 분석 또는 거부 된 약속을 반환합니다. yield 긴 폴링

페치 API 및 발전기를 함께 사용할 수있는 사용 사례 중 하나는 긴 폴링입니다. 긴 폴링은 클라이언트가 응답을 얻을 때까지 지속적으로 서버에 요청을 보내는 기술입니다. 이 경우 발전기를 사용하여 응답에 데이터가 포함될 때까지 응답을 지속적으로 생성 할 수 있습니다.

긴 설문 조사를 시뮬레이션하기 위해 5 번의 시도 후 도시의 실시간 날씨 정보에 반응하는 샘플 코드에 Express Rest API를 포함 시켰습니다. 나머지 API는 다음과 같습니다 이제,이 API를 여러 번 호출하는 생성기 함수를 작성하고 각 반복에 대한 약속을 반환합시다. 클라이언트에서는 서버에서 데이터를 얻을 수있는 반복의 수를 모릅니다. 따라서이 방법에는 무한 루프가 있으며 각 반복은 서버를 핑하고 각 반복에 대한 약속을 반환합니다. 다음은이 방법의 구현입니다 : 우리는이 함수를 지속적으로 호출하고 약속 구문 분석 후 값이 존재하는지 확인하기 위해 함수가 필요합니다. 발전기의 다음 반복을 호출하는 재귀 함수이며 발전기에서 반환 된 값이 발견 된 경우에만 프로세스를 중지합니다. 다음 코드 스 니펫은이 메소드의 구현 과이 방법을 호출하는 진술을 보여줍니다.

여기에서 볼 수 있듯이 함수

에 대한 첫 번째 호출은 생성기 개체를 만듭니다.

메소드는 속성으로 객체를 반환하며, 우리의 경우

메소드에 의해 반환 된 약속이 포함되어 있습니다. 이 약속이 구문 분석되면 빈 객체 ( 변수가 5 미만인 경우 반환) 또는 필요한 정보를 포함하는 다른 개체가 포함됩니다.

다음으로 우리는이 객체의

속성을 ​​확인합니다 (이것은 성공을 나타냅니다). 존재하지 않으면 생성기 객체를 다음 기능 호출 (발전기 상태를 잃지 않도록)으로 전달하거나 객체의 값을 콘솔에 인쇄합니다.

는 작동 방식을 확인하고 저장소에서 코드를 가져오고, 종속성을 설치하고, 서버를 시작하고,

https://www.php.cn/link/494ad0d24e15c7da81c7ea265c7f4cb4

로 이동하십시오. 결과 : <.>

0 True 보내기 ... 비어 있습니다 1 True 보내기 ... 비어 있습니다 2 True 보내기 ... 비어 있습니다 3 True 보내기 ... 비어 있습니다 4 True 보내기 ... 비어 있습니다 5 거짓 보내기 ... 물체 및 객체 자체가 브라우저 콘솔에 인쇄되었습니다.

다중 종속성의 비동기 호출 일반적으로, 우리는 다중 의존성 비동기 호출을 구현해야하며, 각 후속 비동기 조작은 이전 비동기 조작에 의해 반환 된 값에 따라 다릅니다. 그러한 작업 세트가 있고 여러 번 호출 해야하는 경우 생성기 기능에 넣고 필요한 경우 실행할 수 있습니다. 이를 입증하기 위해 Github의 API를 사용하겠습니다. 이 API는 사용자, 조직 및 리포지토리에 대한 기본 정보에 대한 액세스 권한을 제공합니다. 이 API를 사용하여 조직의 임의의 저장소에 기고자 목록을 얻고 검색된 데이터를 화면에 표시합니다.

이렇게하려면 세 가지 다른 엔드 포인트를 호출해야합니다. 다음은 수행 해야하는 작업입니다.

조직의 세부 정보를 얻으십시오 조직이 존재하는 경우 조직의 저장소 를 가져옵니다 조직의 리포지토리 중 하나 (무작위로 선택된) 에 기고자를 받으십시오.

프레치 API 주위에 래퍼 함수를 ​​만들어서 코드를 반복적으로 작성하여 헤더를 생성하고 요청 객체를 빌드하자.

다음 함수는 위의 함수를 사용하고 각 호출에 약속을 생성합니다.

이제 위의 함수를 호출하여 생성기를 얻은 다음 서버에서 얻은 값으로 UI를 채우는 논리를 작성해 봅시다. 발전기의

메소드에 대한 각 호출은 약속을 반환하기 때문에 이러한 약속을 연결해야합니다. 다음은 위의 함수를 사용하여 반환 된 생성기의 코드 프레임 워크입니다.

(Markdown에서 Codepen을 렌더링 할 수 없기 때문에 데모 부품이 여기에서 생략됩니다) 결론

• 이 기사에서는 비동기 API를 구축하기 위해 생성기와 함께 Fetch API를 사용하는 방법을 시연했습니다. ECMAScript 6은 언어에 많은 새로운 기능을 가져 오며,이를 결합하고 힘을 활용하는 창의적인 방법을 찾으면 종종 훌륭한 결과를 가져옵니다. 그러나 당신은 어떻게 생각하십니까? 이것이 우리가 앱에서 바로 사용할 수있는 기술입니까? 나는 의견에서 당신의 생각을 듣고 싶습니다.
(FAQ 부분은 이전 정보에서 내용이 크게 복제되어 있기 때문에 여기서 생략됩니다)

위 내용은 Fetch API 및 ES6 생성기를 사용한 비동기 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!