집 > 기사 > 웹 프론트엔드 > js의 Promise 인스턴스 분석

js의 Promise 인스턴스 분석

小云云원래의: 2018-02-05 10:00:452189검색

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 메소드를 사용하여 체인 호출을 구현할 수 있습니다.

js의 Promise 인스턴스 분석

관련 기사