웹 프론트엔드 JS 튜토리얼 js의 Promise 인스턴스 분석

js의 Promise 인스턴스 분석

Feb 05, 2018 am 10:00 AM
javascript promise

nodejs가 매우 빠르다는 것은 누구나 알고 있습니다. 왜 그렇게 빠른가요? 그 이유는 노드가 기다려야 하는 이벤트를 처리하기 위해 비동기 콜백을 사용하여 코드가 어딘가에서 기다리지 않고 계속 실행되기 때문입니다. 하지만 단점도 있습니다. 예를 들어 이 콜백을 실행한 후 다음 콜백을 실행해야 하며 이로 인해 중첩 및 불분명한 코드가 발생하므로 매우 어렵습니다. . "콜백 감옥"에 들어가기 쉽습니다. 다음과 같은 예가 쉽게 발생할 수 있습니다:

async(1, function(value){
 async(value, function(value){
 async(value, function(value){
  async(value, function(value){
  async(value, function(value){
   async(value, final);
  });
  });
 });
 });
});
로그인 후 복사

이렇게 쓰면 사람들이 무너질 텐데, 이 문제를 해결할 수 있는 방법이 있나요, 아니면 다른 방법이 있나요? 글쓰기? 대답은 '예'입니다. es6의 새로운 promise 객체와 es7의 async wait가 이 문제를 해결할 수 있습니다. 물론 여기서는 promise 객체를 먼저 소개하고 es7의 async wait는 다음 기사에서 공유하겠습니다. Promise 객체는 아래에 소개됩니다.

2. 소개

Promise는 비동기 작업을 처리하는 데 사용되는 개체로, 비동기 호출을 더욱 우아하고 보기 좋게 작성할 수 있습니다. 이름에서 알 수 있듯이 Promise를 뜻하는데, Promise를 사용한 후에는 성공이든 실패든 반드시 우리에게 답장을 해준다는 뜻이므로 실행에 대한 걱정은 하지 않아도 된다. 떨어져, 하하. 따라서 Promise에는 보류(진행 중), 해결(완료), 거부(실패)의 세 가지 상태가 있습니다. 비동기적으로 반환된 구조만 상태를 변경할 수 있습니다. 따라서 일반적으로 Promise 프로세스는 보류->해결 또는 보류->거부라는 두 가지 프로세스만 있습니다.

Promise 개체에는 콜백 함수를 실행하는 데 더 일반적으로 사용되는 then 메서드가 있습니다. then 메서드는 두 개의 매개변수를 받습니다. 첫 번째는 성공적인 해결 콜백이고, 다른 하나는 실패한 거부 콜백입니다. 콜백. 매개변수는 선택사항입니다. 그리고 then 메소드는 체인에서 호출될 수 있도록 promise 객체를 반환할 수도 있습니다. 다음 코드는 다음과 같습니다.

var Pro = function (time) {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    console.log('123');
    //模拟接口调用
    setTimeout(function () {
     //这里告诉Promise 成功了,然后去执行then方法的第一个函数
     resolve('成功返回');
    }, time);
   })
  };
  (function(){
   console.log('start');
   Pro(3000)
   .then(function(data){
    console.log(data);
    return Pro(5000);})
   .then(function(data){
    console.log(data);
    console.log('end');
   })
  })();
로그인 후 복사

위 코드에서는 Pro 변수가 정의된 다음 여기에 익명 함수가 할당됩니다. 함수는 Promise 객체를 반환한 다음 객체에서 함수를 수신하고 확인 및 전달합니다. 메서드를 각각 매개 변수로 거부하고 setTimeOut을 사용하여 비동기 요청을 시뮬레이션하면 then 메서드의 함수가 호출됩니다. 결과는 다음과 같습니다:

3. Promise api 

1, Promise.resolve()
2, Promise.reject()
3, Promise.prototype.then()
4, Promise.prototype.catch ()
5. Promise.all() // 모두 완료되었으며
6. Promise.race() // 하나만 완료하면 or

1과 동일합니다. ()는 이제 Promise 객체로 변환됩니다. Promise.resolve('test')==new Promise(resolve=>resolve('test'))

2도 반환됩니다. ;

3 상태의 Promise 객체 then 메소드는 위에 소개되었으므로 여기서는 소개하지 않겠습니다.

4.catch(): 오류 발생 시 콜백 함수입니다.

5. Promise.all()은 모든 결과가 완료된 후에만 then()의 성공적인 작업에 적합합니다. 예:

let p1 =new Promise(function(resolve,reject){
   resolve(1);
  });
  let p2 = new Promise(function(resolve,reject){
   resolve(2);
  });
  let p3 = new Promise(function(resolve,reject){
   resolve(3);
  });
  Promise.all([p1, p2, p3]).then(function (results) {
   console.log('success:'+results);
  }).catch(function(r){
   console.log("error");
   console.log(r);
  });
로그인 후 복사

최종 출력:

6. Promise.race()의 기능은 하나의 인스턴스가 상태를 변경하는 한 동시에 여러 인스턴스를 실행하는 것입니다.

4. 예시

var Pro = function () {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    //模拟接口调用
    setTimeout(function () {
     resolve(true);
    }, 1000);
   })
  };
  var Pro2 = function () {
   //返回一个Promise对象
   return new Promise(function (resolve, reject) {
    //模拟接口调用
    setTimeout(function () {
     resolve('Pro2成功执行');
    }, 1000);
   })
  };
  
  Pro().then(function(data){
   var val = data;
   console.log(val)
   if (val) {
    console.log(1111)
    return Pro2()
   }
   
  }).then(function(data1){
   console.log(data1)
  })
로그인 후 복사

출력:

이러한 방식으로 then 메소드를 사용하여 체인 호출을 구현할 수 있습니다.

관련 권장사항:

ES6 Promise 확장된 Always 메소드 인스턴스 세부 설명

jQuery의 Promise를 올바르게 사용하는 방법

promsie.all 및 Promise 순차적 실행 세부 설명

위 내용은 js의 Promise 인스턴스 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

약속 지키기: 약속 이행의 장점과 단점 약속 지키기: 약속 이행의 장점과 단점 Feb 18, 2024 pm 08:06 PM

일상생활에서 우리는 약속과 이행 사이에서 종종 문제에 직면합니다. 개인적인 관계에서든 비즈니스 거래에서든 약속을 이행하는 것은 신뢰 구축의 핵심입니다. 그러나 헌신의 장단점은 종종 논란의 여지가 있습니다. 이 기사에서는 약속의 장단점을 살펴보고 약속을 지키는 방법에 대한 몇 가지 조언을 제공합니다. 약속된 혜택은 분명합니다. 첫째, 헌신은 신뢰를 구축합니다. 사람이 약속을 지키면 다른 사람들이 자신을 믿을 만한 사람이라고 믿게 만듭니다. 신뢰는 사람들 사이에 확립된 유대이며, 이는 사람들을 더 나은 사람으로 만들 수 있습니다.

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

Promise.resolve()에 대해 자세히 알아보세요. Promise.resolve()에 대해 자세히 알아보세요. Feb 18, 2024 pm 07:13 PM

Promise.resolve()에 대한 자세한 설명에는 특정 코드 예제가 필요합니다. Promise는 비동기 작업을 처리하기 위한 JavaScript의 메커니즘입니다. 실제 개발에서는 순서대로 실행해야 하는 일부 비동기 작업을 처리해야 하는 경우가 종종 있으며, 이행된 Promise 객체를 반환하기 위해 Promise.resolve() 메서드가 사용됩니다. Promise.resolve()는 Promise 클래스의 정적 메서드입니다.

Golang의 포인터 변환 모범 사례를 알아보세요. Golang의 포인터 변환 모범 사례를 알아보세요. Feb 24, 2024 pm 03:51 PM

Golang은 다양한 애플리케이션과 서비스를 개발하는 데 사용할 수 있는 강력하고 효율적인 프로그래밍 언어입니다. Golang에서 포인터는 데이터를 보다 유연하고 효율적으로 운영하는 데 도움이 되는 매우 중요한 개념입니다. 포인터 변환은 다양한 유형 간의 포인터 작업 프로세스를 나타냅니다. 이 기사에서는 특정 예제를 사용하여 Golang의 포인터 변환 모범 사례를 학습합니다. 1. 기본 개념 Golang에서 각 변수에는 주소가 있으며, 주소는 메모리에서 변수의 위치입니다.

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

See all articles