1. Promise 이전

1.1 리셋 함수

리셋 함수: 함수 A를 매개 변수로 다른 함수 B 호출에 전달하면 A는 리셋 함수입니다.몇몇 예들은 서명하여 답조한다

function  (fn){
    fn(' ')
}
function  ( ){
    console.log( )
}
 ( )   //

익명 리셋

function  (fn){
    fn(' ')
}
 (function( ){
console.log( ) 
})         //

흔히 볼 수 있는 예는 jQuery에서 리셋 함수를 사용하는데, 여기는 익명으로 리셋하는 방식을 사용합니다.

$("#btn").click(function(){
    console.log(' ')
})

1.2 회조 지옥(회조 결점 1)

리셋 지옥: 리셋이 너무 많은 상황을 가리키기 때문에 코드를 이해하기 어렵다.

let info = []
function  (fn){
    fn(' ')
}
function  (fn){
    fn(' ')
}
function  ( ,callback){
    info.push( )
    console.log(info)
    if(callback){
        callback()
    }
}
//    ， 
 (function( ){
    console.log( )
     ( , function(){
         (function( ){
            console.log( )
             ( )
        })
    })
})

1.3 Promise를 사용하지 않고 해결하는 방법

구명 함수를 이용하여 익명 함수를 대체하다

let info = []
function  (fn){
    fn(' ')
}
function  (fn){
    fn(' ')
}
function  ( ,callback){
    info.push( )
    console.log(info)
    if(callback){
        callback()
    }
}
function  ( ){
    console.log( )
     ( )
}
function  (){
     ( )
}
function  ( ){
    console.log( )
     ( ,  )
}
 ( )  //  。。。

1.4 리셋 방식이 각각 다르기 때문에 단독 기억이 필요하다(리셋 단점2)

readFile('C:\\1.txt',function (error, data) {   // node.js  
        if(error) {
            console.log(' ')
            console.log(data.toString())
        } else {
            console.log(' ')
        }
    })

$.ajax({                              // jQuery ajax 
    url:'/2.txt'
    success: function(response) {
        console.log(' ')
    },
    error: function(){
        console.log(' ')
    }
})

2. Promise의 목적

Promise는 비동기 프로그래밍의 해결 방안으로 전통적인 해결 방안인 리셋 함수와 사건보다 더욱 합리적이고 강력하다.이것은 지역 사회가 최초로 제기하고 실현한 것으로 ES6는 이를 언어 표준에 쓰고 용법을 통일시켰으며 원생은 Promise 대상을 제공했다.

3. Promise의 원리

3.1 실현 원리

ES6에 따르면 Promise 객체는 Promise 인스턴스를 생성하는 데 사용되는 구조 함수입니다.함수 내부에서 Promise 대상의 실례를 리턴하면 Promise의 속성과 방법을 사용하여 다음 작업을 할 수 있습니다.

function  (){
    return new Promise(function(resolve, reject) {
        // ... some code
          if (/*   */){
            resolve(value);   //  ， 
          } else {
            reject(error);     //  ， 
          }
        
    })
}

3.2 논리 호출

S1과 E1 둘 다 오류가 없습니다. S2를 실행합니다. (resolve 실행, 시스템은 끝났다고 생각하고 오류가 없습니다.)
S1과 E1 중 어느 하나라도 오류가 발생했습니다. E2를 실행합니다.

4. Promise의 사용

4.1 Promise의 속성 및 방법

속성 Promise.prototype은 Promise 구조기의 원형 방법인 Promise를 나타냅니다.prototype.그러면 Promise가 반환됩니다.Promise의 성공과 실패 상황에 대한 콜백 함수는 최대 두 개의 매개변수가 필요합니다.Promise.prototype.catch()는 Promise를 반환하고 거부된 상황을 처리합니다.약속과 같다.prototype.then(undefined, onRejected) Promise.prototype.finally () finally () 방법은 Promise를 되돌려줍니다. then () 과catch () 를 실행한 후에finally가 지정한 리셋 함수를 실행합니다.같은 문장을 then () 과catch () 에서 한 번씩 써야 하는 상황을 피하십시오.Promise.all (iterable) 은 Promise 실례를 되돌려줍니다. iterable 매개 변수에 있는 모든promise가resolved된 후에야resolve를 되돌려줍니다.Promise.race (iterable) 는 promise를 되돌려줍니다. promise 대상이 해결한 되돌려 주기 값이나 거절하는 오류 원인과 함께, iterable 중 promise 대상이'해결 (resolve)'이나'거절 (reject)'만 있으면.Promise.resolve()는 지정된 값으로 해결된 Promise 객체를 반환합니다.그러나 이 값이 thenable (즉 then 방법이 있음) 이면 되돌아오는 promise는 이 thenable의 대상을 따라가서 최종 상태 (resolved/rejected/pending/settled를 가리킨다) 를 사용합니다.만약 전송된 value 자체가 promise 대상이라면 이 대상은 Promise입니다.resolve 방법의 반환값 반환;그렇지 않으면 이 값을 성공 상태로promise 대상으로 되돌려줍니다.Promise.reject()는 거부 원인reason 매개변수가 있는 Promise 객체를 반환합니다.

4.2 지옥의 예를 되돌려 Promise의 형식으로 바꾼다

Promise를 사용한 후 논리가 매우 직관적으로 변하는 것을 볼 수 있다
Promise 세트 Promise를 더 완전하게 썼을 때, 즉 Promise 체인을 썼을 때, 정보의 전달에 주의하세요
실패의 예는 우리가 Promise 체인을 사용할 때 한 걸음 한 걸음 지난 데이터가 필요할 때 전삼이 필요하고resolve를 통해 전삼을 성공시키고reject를 통해 전삼을 실패한다. 전삼을 잊어버리면 원하는 결과를 얻지 못한다.
resolve에서 성공한 데이터를 다음 리셋으로 되돌려줍니다.
reject는 실패한 데이터를 다음 리셋으로 되돌려줍니다.
여기 Resolve에 실패한 예를 하나 전해주세요.
먼저reject전삼을 주지 않습니다. 실패하면 다음 전삼은 데이터를 가져오지 못해서reject전삼을 볼 수 있습니다. 실패하더라도 다음 성공회조는 실행됩니다. () 기본적으로undefined를 되돌려주는 것은 실패가 처리된 것과 같습니다. 성공과 실패가 모두 처리된 상황에서 다음 전삼은 실행됩니다.
예상에 부합되는 것으로 바꾸면 실패하고 호출하지 않습니다.
호출되지 않은 약어 형식의 상술한 상황을 실행한 후.then (개 제외) 의 성공 리셋이 실행되지 않았습니다. 실패 리셋을 추가해 보겠습니다. 마찬가지로 리셋도 실행할 수 있습니다. 뒤에 성공 리셋이 실행될 수 있도록

4.3 응용

그림을 불러오면 그림의 불러오기를 Promise로 쓰고, 불러오기가 완료되면 Promise의 상태가 바뀝니다.

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};

Generator 함수와 Promise의 결합 (상세한 내용은 참조 링크, 완일봉의 강좌 참조)

5. Promise의 리셋 제거

5.1 await

성공한 경우 실패한 경우trycatchawait를 이용하여trycatch와 함께 사용하면 비교적 완전하다

6. 총결산

Promise 대상을 이용하여 일반 함수를 Promise로 돌아가는 형식으로 바꾸어 지옥으로 돌아가는 문제를 해결할 수 있다.Promise의 성공 실패 호출 논리를 이해하고 유연하게 조정할 수 있습니다.핵심 지식을 이해하려면 먼저 사용하고 천천히 지식을 통합하여 흡수해야 한다.

7. 참조 링크

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

http://es6.ruanyifeng.com/#docs/promise

https://www.w3cplus.com/javascript/Sexy-Javascript-understand-the-callback-function-with-the-use-of-Javascript-in.html

https://juejin.im/entry/57fa6a4e67f3560058752542

다음으로 전송:https://juejin.im/post/5b0e07d85188253bdb1b3d61

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ES6 - 예를 들어 Promise의 원리와 사용 이해