fetch 및 Promise

4580 단어 비동기 프로그래밍promise

fetch


관련 기사 github, 관련 소개 fetch 대비 XMLHttpRequest(XHR) 장점: 오프라인 체험 개선, 확장성 유지

Promise


리셋 모드: 다중 리셋은 우리를 리셋 지옥에 빠뜨릴 수 있다
Promise가 여러 개의 리셋 함수를 추적하고 정리 작업을 하면 Promise는 이런 상황을 대폭 개선할 수 있다
method1(function(err, result) {
    if (err) {
    throw err;
    }
        method2(function(err, result) {
            if (err) {
            throw err;
            }
                method3(function(err, result) {
                    if (err) {
                    throw err;
                    }
                        method4(function(err, result) {
                        if (err) {
                        throw err;
                        }
                        method5(result);
            });
        });
    });
});

사용 개선은
    new Primise(()=>{
        if(err) {
            reject(err)
            return
        }
        resolve(result)
    }).then(
        ()=>{
            if(err) {
                reject(err)
                return
            }
            resolve(result)
        })
        ...
        catch(err=>{
            console.log(err)
        })

Promise 라이프 사이클


'pending'(끊기),'fulfilled'(완성),'rejected'(거부),pengding에서만fulfilled 또는rejected로 변경할 수 있습니다.절대 거꾸로 갈 수 없다
var promise = new Promise(function(resolve, reject) {
console.log("Promise");
resolve();
}).then(()=>{console.log("resolved")});
console.log("Hi!");
//Promise=>Hi!=>resolved

처리 함수 완성과 처리 거부 함수는 항상 실행기의 작업이 끝난 후에 작업 대기열의 끝부분에 추가됩니다.

Promise then 및catch 사용


then
then() 메서드는 모든 Promise에 존재하며 두 개의 매개변수를 수용합니다.첫 번째 매개 변수는 Promise가 완성되었을 때 호출해야 하는 함수입니다. 비동기 조작과 관련된 모든 추가 데이터는 이 완성 함수에 전송됩니다.두 번째 매개 변수는 Promise가 거부되었을 때 호출해야 하는 함수입니다. 완성 함수와 비슷합니다. 거부 함수는 거부와 관련된 추가 데이터로 전송됩니다.
직렬 Promise
then () 또는catch () 에 대한 호출이 실제로 만들어지고 다른 Promise를 되돌려줍니다. 현재 Promise가 완성되거나 거부될 때만 다음 Promise가 결정됩니다.
then(resolveFn (), rejectFn () 은 then의 상태와 값 변화를 연결합니다.
  • "pending"(끊기) 은 걸지 않는다
  • "fulfilled"(완성)then에서resolveFn(),rejectFn()이 함수가 아닐 때 상태와 값은 다음 레벨로 전달됩니다
  • "rejected"(거부됨) then에서 resolveFn (), rejectFn () 이 함수가 아닐 때 상태와 값은 다음 단계로 전달됩니다
    new Promise(function(resolve, reject){
 resolve(5)
}).then(null,function(value){
 taskA()
}).then(function(value){
 console.log("taskB-------------------"+value)
}).catch(function(reason){
 console.log(reason)
})
// taskB-------------------5

    • 오류 처리
    임의의 오류를 정확하게 처리할 수 있도록 Promise 체인 끝에 거부 처리 함수를 항상 추가해야 합니다.
    catch Promise catch () 메서드는 처리 거부 함수만 then () 에 전달하는 것과 같습니다.
    promise.catch(function(err) {
//  
    console.error(err.message);
});
//  ：
promise.then(null, function(err) {
//  
    console.error(err.message);
});

    Promise 정적 방법


    Promise.resolve() 
        Promise.resolve(5) // 

    new Promise(function(resolve){
        resolve(5)
    })

    Promise.reject() 
        Promise.reject(new Error('error')) // 

    new Promise(function(resolve, reject){
        reject(new Error('error'))
    })

    Promise.all () 는 promise 대상으로 구성된 그룹을 매개 변수로 수신하고 새로운 promise 대상을 Promise에 전달하면 되돌려줍니다.all () 의 임의의 Promise가 거부되면 방법이 되돌아오는 Promise는 즉시 거부됩니다. 다른 Promise가 끝나기를 기다릴 필요가 없습니다. 모두resolve () 는 순서대로 한 그룹에 넣습니다.
    function timeout(time) {
return new Promise(function (resolve) {
    setTimeout(function () {
        resolve(time);
    }, time);
});b
}
console.time('promise')
Promise.all([
    timeout(10),
    timeout(60),
    timeout(100)
]).then(function (values) {
    console.log(values); [10, 60, 100]
    console.timeEnd('promise');   // 100.965087890625ms
});

    Promise.race () 는promise 대상으로 구성된 그룹을 매개 변수로 수신하고 새로운promise 대상으로 돌아가서 가장 빠른resolve를 얻습니다!
    function timeout(time) {
return new Promise(function (resolve) {
    setTimeout(function () {
        resolve(time);
    }, time);
});b
}
console.time('promise')
Promise.race([
    timeout(10),
    timeout(60),
    timeout(100)
]).then(function (values) {
    console.log(values); //10
    console.timeEnd('promise');   // 11.280029296875ms
});

    Promise 요약


    promise then () 과catch () 의 배후 의도는 비동기 조작의 결과를 정확하게 처리하기 위해 조합하는 것입니다.이 시스템은 이벤트와 리셋 함수보다 낫다. 작업이 성공했는지 실패했는지 완전히 명확해지기 때문이다. (이벤트 모드는 오류가 발생했을 때 촉발되지 않는 경향이 있지만, 리셋 함수 모드에서는 오류 파라미터를 항상 검사하는 것을 기억해야 한다.)
    React의 For 루프 React.js에서 루프를 사용하는 방법은 무엇입니까?
    Object의 모든 keys or values 가져오기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage