약속 체인 및 정적 방법

---

여러 계약의 조합은 강력한 코드 논리를 형성 할 수 있습니다. 이 조합은
계약 연결과 계약 합성의 두 가지 방법 으로 달성 할 수 있습니다 .

하나, 약속 체인

각 Promise 메서드는 새로운 Promise 객체를 반환하고, 새로운 Promise에는 Promise 체인을 실현할 수 있도록 자체 메서드가 있습니다.

let p = new Promise((resolve, reject) => {
    
    
    console.log('first');
    resolve();
});
 p.then(() => console.log('second'))
  .then(() => console.log('third'))
  .then(() => console.log('fourth'));
// first
// second
// third
// fourth

일련의 동기 작업이 구현되지만 이것은 비동기 체인이 아닙니다. 실제로 비동기 작업을 실행하려면 각 실행자가 계약의 인스턴스를 반환하도록하여 다른 핸들러가 처리 될 때까지 기다리도록 할 수 있습니다. 결과를 가져옵니다 ( 결과)

예 :

    let p = new Promise((resolve, reject) => {
    
    
        console.log('1');
        setTimeout(resolve, 1000);
    });
    p.then(() => new Promise((resolve, reject) => {
    
    
        console.log('2');
        setTimeout(resolve, 1000);
    }))
    .then(() => new Promise((resolve, reject) => {
    
    
        console.log('3');
        setTimeout(resolve, 1000);
    }));

    //1 (1秒后)
    //2 (2秒后)
    //3 (3秒后)

Promise 체인은 콜백 지옥 문제를 해결 한 다음 (), catch (), finally () 모두 동시에 직렬화 할 수있는 약속을 반환합니다.

둘째, 약속 합성

1. Promise.all ()

이 정적 메서드는 반복 가능한 개체 (일반적으로 배열)를 받고 새 계약을 반환합니다.

1. 주어진 약속이 모두 해결되면 새 약속이 해결되고 결과 배열이 새 약속의 결과가됩니다.

let p = Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]);
console.log(p); // Promise <pending>

p.then(()=>{
    
    console.log(p)}); // Promise <fulfilled> <value>:[1,2,3] 当上面这些 promise 准备好时：每个 promise 都贡献了数组中的一个元素

결과 배열의 요소 순서는 소스 약속의 순서와 동일합니다. 첫 번째 약속은 해결하는 데 가장 오랜 시간이 걸렸지 만 여전히 결과 배열에서 첫 번째 약속입니다. (반복자 순서대로)

2. 포함 된 선물 중 하나 이상이 보류중인 경우 결과 선물도 보류됩니다.

let p1 = Promise.all([new Promise(() =>
{
    
    })]);// 永远pending

let p2 = Promise.all([
Promise.resolve(),
Promise.reject(),
Promise.resolve()
]);

3. Promise가 거부되면 Promise.all이 반환 한 Promise는이 오류와 함께 즉시 거부됩니다.

let p =Promise.all([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
  new Promise((resolve, reject) => setTimeout(() => (console.log('test');reject(3)), 3000))
]).catch(alert); // Error: Whoops!

//test

두 번째 Promise가 거부되고 거부 사유가 Promise.all 거부 사유로 사용됩니다 (오류 : 3).
이후 에 거부 된 Promise 는 최종 Promise.all 사유에 영향을주지 않지만 정상적으로 실행됩니다 (출력 테스트, 자동으로 reject (3) 처리) 처리되지 않은 오류가 없습니다.)

2. Promise.allSettled

약속이 거부되면 Promise.all이 전체적으로 거부됩니다. 모든 결과가 성공해야하는 "전부 또는 전무"상황에 유용합니다.

Promise.all([
  fetch('/template.html'),
  fetch('/style.css'),
  fetch('/data.json')
]).then(render); // render 方法需要所有 fetch 的数据

추신.이 언어는 ES2020의 새로운 언어이며 이전 브라우저는 polyfill을 사용해야합니다.

3. Promise.race ()

Promise.all과 유사하지만 첫 번째 약속을 기다렸다가 그 결과 (또는 오류)를 얻습니다.

// 解决先发生，超时后的拒绝被忽略
let p1 = Promise.race([
Promise.resolve(3),
new Promise((resolve, reject) =>
setTimeout(reject, 1000))
]);
setTimeout(console.log, 0, p1); // Promise <resolved>: 3

Promise.all ()과 유사하게 첫 번째 정산 후 Promise는 정상적으로 실행되며 모든 거부 작업은 자동으로 처리됩니다.

三 、 Promise.resolve / reject

정착에 대한 실행기 함수 외에 다음 두 가지 정적 메서드도 정착에 사용할 수 있습니다. (별로 사용되지 않음)

1. Promise.resolve ()

Promise.resolve (value)는 결과 값으로 해결 된 약속을 만듭니다.
다음 두 가지는 동일합니다

let p1 = new Promise((resolve, reject) =>
resolve());
let p2 = Promise.resolve();

2. Promise.reject ()

Promise.reject (error)는 오류를 사용하여 거부 된 약속을 만듭니다.

네, Promise 정적 메서드 요약

Promise 클래스에는 5 개의 정적 메서드가 있습니다.

1. Promise.all (promises)-모든 promise가 해결 될 때까지 기다릴 때 결과 배열을 반환합니다. 주어진 약속 중 하나가 거부되면 Promise.all의 오류가되고 다른 모든 약속의 결과는 무시됩니다.
2. Promise.allSettled (promises) (ES2020 새로운 메서드)-모든 promise가 해결 될 때까지 기다릴 때 다음을 포함하는 객체 배열 형식으로 결과를 반환합니다.
   • 상태 : "이행 됨"或 "거부 됨"
   • 값 (충족 된 경우) 또는 이유 (거부 된 경우).
3. Promise.race (promises)-첫 번째 약속을 기다렸다가 그 결과 / 오류를 결과로 사용합니다.
4. Promise.resolve (value) —— 주어진 값으로 해결 된 promise를 만듭니다.
5. Promise.reject (error)-주어진 오류로 거부 된 Promise를 만듭니다.