약속 원칙-프런트엔드 Q&A-php.cn

약속 원칙

藏色散人

풀어 주다： 2019-07-10 10:27:32

원래의

3769명이 탐색했습니다.

1. 약속 적용 시나리오

1 콜백 지옥 해결

예를 들어 다음 비동기 작업을 위한 입력 매개변수로 데이터 조각을 비동기적으로 요청해야 하는 경우가 종종 있습니다

getData(function(a){  
    getMoreData(a, function(b){
        getMoreData(b, function(c){ 
            getMoreData(c, function(d){ 
                getMoreData(d, function(e){ 
                    ...
                });
            });
        });
    });
});

로그인 후 복사

찾을 수 있습니다 위의 코드는 중첩된 레이어로 인해 매우 무섭습니다. 복잡한 논리적 판단이 추가되면 코드의 가독성이 매우 떨어집니다.

그러나 promise를 사용하는 경우:

function getData() {
    return new Promise(function (resolve, reject) {
        resolve(1);
    });
}
function getMoreData(arg) {
    return new Promise(function (resolve, reject) {
        resolve(arg + 10);
    });
}
getData().then(function (a) {
    console.log(a); // 1
    return getMoreData(a);
}).then(function (b) {
    console.log(b); // 11
})

로그인 후 복사

위 코드를 더 간결하게 만듭니다.

getData()
.then(a => getMoreData(a))
.then(b => console.log(b));

로그인 후 복사

2 promise는 여러 요청을 보낸 후에 완료될 수 있습니다. 그런 다음 get 또는 특정 결과 처리

// 两个数据都回来之后再进行操作
let fs = require(&#39;fs&#39;);
fs.readFile(&#39;./1.txt&#39;, &#39;utf8&#39;, function (err, data) {
    console.log(data);
})
fs.readFile(&#39;./2.txt&#39;, &#39;utf8&#39;, function (err, data) {
    console.log(data);
})
使用promise的话就可以实现：
let fs = require(&#39;fs&#39;);
function read(url){
    return new Promise(function(resolve,reject){
        fs.readFile(url,&#39;utf8&#39;,function(err,data){
            if(err)reject(err);
            resolve(data);
        })
    })
}
Promise.all([read(&#39;1.txt&#39;),read(&#39;2.txt&#39;)]).then(data=>{
    console.log(data);
},err=>{
    console.log(err);
});

로그인 후 복사

2. 약속 원칙 구현

1 가장 간단한 구현

#🎜 🎜#기반 위의 애플리케이션 시나리오에서 Promise는 pedding, 이행 및 거부라는 세 가지 상태를 가질 수 있음을 알 수 있습니다.

Pending Promise 객체 인스턴스가 생성된 초기 상태

Fulfilled는 성공한 상태로 이해 가능

Rejected는 실패한 것으로 이해 가능 state #🎜🎜 #

Promise 인스턴스를 생성하려면 Promise 생성자에 함수를 전달해야 합니다. 전달된 함수에는 두 개의 형식 매개변수가 있어야 하며, 둘 다 함수 유형 매개변수입니다. 그들은 각각 해결과 거부입니다.

Promise에도 then 메소드가 있습니다. then 메소드는 Promise 객체의 상태가 변경될 때 실행될 작업을 지정하는 데 사용됩니다. (onRejected)

Reject로 상태가 바뀌면 Reject로 바뀔 수 없으며, 그 반대도 마찬가지입니다.

위의 설명을 바탕으로 이러한 약속을 구현할 수 있습니다

function Promise(executor){ //executor执行器
    let self = this;
    self.status = &#39;pending&#39;; //等待态
    self.value  = undefined; // 表示当前成功的值
    self.reason = undefined; // 表示是失败的值
    function resolve(value){ // 成功的方法
        if(self.status === &#39;pending&#39;){
            self.status = &#39;resolved&#39;;
            self.value = value;
        }
    }
    function reject(reason){ //失败的方法
        if(self.status === &#39;pending&#39;){
            self.status = &#39;rejected&#39;;
            self.reason = reason;
        }
    }
    executor(resolve,reject);
}
Promise.prototype.then = function(onFufiled,onRejected){
    let self = this;
    if(self.status === &#39;resolved&#39;){
        onFufiled(self.value);
    }
    if(self.status === &#39;rejected&#39;){
        onRejected(self.reason);
    }
}
module.exports = Promise;

로그인 후 복사

위 내용은 약속 원칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!