ES6 promise

리셋과promise 방법은 데이터 요청 (아날로그) resolve에 사용됩니다. 성공할 때 해야 할 일을 나타냅니다.

    function f() {
        return new Promise(resolve => {
            setTimeout(function() {
                resolve();
            }, 1000);
        })
    }

    f()
        .then(function() {
            console.log(1);
            //return promise ， .then()
            return f();
        })
        .then(function() {
            console.log(2);
            return f();
        })
        .then(function() {
            console.log(4);
            return f();
        })
        .then(function() {
            console.log(3);
            return f();
        })
        .then(function() {
            console.log(5);
            return f();
        })
        .then(function() {
            console.log(6);
        });

사례: Promise가 새로 만들어지면 바로 실행됩니다. 그래서 먼저 출력하는 것은 Promise입니다. 그리고 then 방법이 지정한 리셋 함수는 현재 스크립트의 모든 동기화 작업이 끝나야 실행됩니다. 따라서resolved 마지막 출력

    let promise=new Promise(resolve=>{
        console.log('Promise');
        resolve();
    });

    promise.then(function(){
        console.log('resolved');
    });

    console.log('Hello!');
    // ：Promise Hello! resolved

Promise 작은 애니메이션 사례: index.html

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <style>
    #el {
      width: 100px;
      background: green;
      transition: all 1s;
      color: white;
      line-height: 100px;
      text-align: center;
      font-size: 40px;
    }
  style>
head>
<body>
  <div id="el"> div>
  <button id="btn"> button>
  <script src="./main.js">script>
body>
html>

main.js

function moveTo(el, x, y) {
    return new Promise(resolve => {
        el.style.transform = `translate(${x}px, ${y}px)`;
        setTimeout(function() {
            resolve();
        }, 1000);
    });
}

let el = document.querySelector('div');

document.querySelector('button').addEventListener('click', e => {
    moveTo(el, 100, 100)
        .then(function() {
            console.log(' ');
            return moveTo(el, 200, 200);
        })
        .then(function() {
            console.log(' ');
        })
        .then(function() {
            console.log(' ');
        });
});

오류 처리 resolve 성공 시 작업 reject 실패 시 작업

  function f(val) {
    return new Promise((resolve, reject) => {
      if (val) {
        resolve({ name: ' ' });
      } else {
        reject('404');
      }
    }); 
  }

  f(true)
    .then((data) => {
      console.log(data)
    }, e => {
      console.log(e);
    })

catch는 실례적인catch 방법을 사용하여 오류를 포착할 수 있습니다

    f(true)
      .then(data => {
        console.log(data);
        return f(false);
      })
      .then(() => {
        console.log(' ');
      })
      .then(() => {

      })
      .catch(e => {
        console.log(e);
        return f(false) ;
      });

finally 성공하든 실패하든 finally의 내용은 반드시 실행됩니다

   f(true)
      .then(data => {
        console.log(data);
        return f(false);
      })
      .catch(e => {
        console.log(e);
        return f(false);
      })
      .finally(() => {
        console.log(100);
      });

promise 세 가지 상태pending 진행 중fulfilled 성공rejected 실패 상태의 변경 불가역: pending은fulfilled 또는rejected로

Promise.all 방법은 여러 개의 promise 실례를 새로운 promise 실례 Promise로 포장할 수 있습니다.all([promise1,promise2]): Promise 시뮬레이션은 여러 개의 요청된 데이터가 있어야 다음 작업을 할 수 있는 상황

    function getData1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data1');
        }, 1000);
      });
    }
    function getData2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data2');
        }, 1000);
      });
    }
    function getData3() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data3');
        }, 1000);
      });
    }
    function getData4() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data4');
        }, 2000);
      });
    }
    //  ， ， 
    let p = Promise.all([getData1(),getData2(),getData3(),getData4()]);
    p.then(arr => {
      console.log(arr);
    });

하나의 데이터가 실패하면 총 결의가 실패하고 오류 정보를 되돌려줍니다.

    function getData1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data1');
        }, 1000);
      });
    }
    function getData2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data2');
        }, 1000);
      });
    }
    function getData3() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data3');
        }, 1000);
      });
    }
    function getData4() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('data4 err');
        }, 500);
      });
    }
    //  ， ， 
    let p = Promise.all([getData1(),getData2(),getData3(),getData4()]);
    p.then(arr => {
      console.log(arr);
    },e=>{
        console.log(e);
    });

공수조 직접 결의 성공

    function getData1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data1');
        }, 1000);
      });
    }
    function getData2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data2');
        }, 1000);
      });
    }
    function getData3() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(' ');
          resolve('data3');
        }, 1000);
      });
    }
    function getData4() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('data4 err');
        }, 500);
      });
    }
    //  
    let p = Promise.all([]);
    p.then(() => {
      console.log('null');
    },e=>{
        console.log(e);
    });

promise.race는 성공하거나 실패하는 결의가 있으면 되돌아온다

  function getData1() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(' ');
        reject('err');
      }, 500);
    });
  }
  function getData2() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(' ');
        resolve('data2');
      }, 1000);
    });
  }
  function getData3() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(' ');
        resolve('data3');
      }, 1000);
    });
  }

  let p = Promise.race([getData1(),getData2(),getData3()]);

  p.then(data => {
      console.log(data);
  }, e => {
      console.log(e);
  })

빈 그룹이 끊깁니다.

  let p = Promise.race([]);

Promise.resolve() 및 Promise.reject () 는 실패나 성공으로 결의된promise 실례를 만드는 데 자주 사용됩니다.

Promise.resolve는 일반적인 값을 전달하는 데 성공하고 값을 전달합니다

    let p1 = new Promise(resolve => {
      resolve(' !');
    });
    let p2 = Promise.resolve(' !');

Promise.resolvepromise 실례 전달

    let poruomiesi = new Promise(resolve => {
      resolve(' !')
    });
    //  promise
    let p = Promise.resolve(poruomiesi);
    p.then(data => void console.log(data));
    console.log(p === poruomiesi);

Promise.resolve는 thenable을 전달합니다. 만약에 thenable을 전달합니다.

    let obj = {
      then(cb) {
        console.log(' ');
        cb(' ！');
      },
      oth() {
        console.log(' ');
      }
    }
    //  then 
    Promise.resolve(obj).then(data => {
      console.log(data);
    });

Promise.reject 직접 결의는 실패, 처리하지 않음

    Promise.reject({ then() { console.log(1) } })
      .then(() => {
        console.log(' ');
      }, e => {
        console.log(e);
      });

비동기 작업은 항상 동기화 작업 후에 동기화 작업을 비동기 작업으로 전환합니다

    function createAsyncTask(syncTask) {
      return Promise.resolve(syncTask).then(syncTask => syncTask());
    }
    createAsyncTask(() => {
      console.log(' ！！！');
      return 1 + 1;
    }).then(res => {
      console.log(res);
    });
    console.log(' !');

요구사항: 여러 장의 그림을 불러와야 통일된 전시를 할 수 있다

    const loadImg = src => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.src = src;
            img.onload=()=>{
                resolve(img);
            };
            img.onerror=(e)=>{
                reject(e);
            };
            // img.onload = void resolve(img);
            // img.onerror = void reject(' ');
        });
    };

    const imgs = [
        'http://img1.sycdn.imooc.com\/climg/5b16558d00011ed506000338.jpg',
        'http://img1.sycdn.imooc.com\/climg/5b165603000146ca06000338.jpg',
        'http://img1.sycdn.imooc.com//climg/5b1656140001c89906000338.jpg'
    ];

    // map 
    Promise.all(imgs.map(src => loadImg(src))).then(arr => {
        console.log(arr);
        arr.forEach((img)=>{
            document.body.appendChild(img);
        });
    });
    // map （ ， ）
    // map ， src 
    // const promises=imgs.map(src =>{
    //     return loadImg(src);
    // });
    // Promise.all(promises).then(arr => {
    //     console.log(arr);
    //     arr.forEach((img)=>{
    //         document.body.appendChild(img);
    //     });
    // }).catch((e)=>{
    //     console.log(e);
    // });

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

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

다양한 언어의 JSON

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

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

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

ES6 promise

좋은 웹페이지 즐겨찾기