Es6-promise

米稷
122 阅读3分钟

一、实例方法

1.then

1.什么时候执行

pending->fulfilled时,执行then的第一个回调函数 pending->rejected时,执行then的第二个回调函数

2.执行后的返回值

then方法执行返回后一个新的promise对象
const p=new Promise((resolve,reject)=>{
    resolve()
    //reject()
})
const p2=p
.then(
    ()=>{},
    ()=>{},
    ()=>{},
).then().then()
console.log(p,p2,p===p2);

3.then方法返回的Promise对象的状态改变

const p=new Promise((resolve,reject)=>{
            // resolve()
            reject()
        })
        p.then(
            ()=>{
                console.log("sucess");
            },
            ()=>{
                console.log("err");
                return 123;
            }
        ).then(
            data=>{
                console.log("sucess2",data);
                return new Promise(resolve=>{
                    resolve(undefined)
                })
            },
            err=>{
                console.log("err2",err);
            }
        ).then(
            data=>{
                console.log("sucess3",data);
            },
            err=>{
                console.log("err3",err);
            }
        )

2.Promise案例

<style>
   #box {
     width: 500px;
     height: 500px;
     background-color: red;
     transition: all 0.5s;
   }
 </style>
<body>
   <div id="box"></div>
   <script>
        const boxEI = document.getElementById("box");
        const move=(el,{x=0,y=0}={},end=()=>{})=>{
           el.style.transform=`translate3d(${x}px,${y}px,0)`;
           el.addEventListener(
               "transitionend",
               ()=>{
                   console.log("end");
                   end()
               },
               false
           )
        }

        const movePromise=(el,point)=>{
           return new Promise((resolve)=>{
               move(el,point,()=>{
                   resolve()
               })
           })
        }

        document.addEventListener("click",()=>{
           movePromise(boxEI,{y:150})
           .then(()=>{
               return movePromise(boxEI,{x: 150,y:150})
           })
           .then(()=>{
               return movePromise(boxEI,{x:150})
           })
           .then(()=>{
               return movePromise(boxEI,{})
           })
        })
   </script>
</body>

3.catch

1.有什么用

then(data=>{}err={}) then(data=>{}) catch 专门用来处理rejected状态 catch 本质上是then的特例 then(null,err=>{})

2.基本用法

new Promise((resolve, reject) => {
 reject("reason");
})
 .then((data) => {
   console.log(data);
 })
 .catch((err) => {
     console.log(err);
     throw new Error("reason")
 })
 .then(data=>{
     console.log(data);
 })
 .catch((err) => {
     console.log(err);
 })

4.finally

1.什么时候执行

当Promise状态发生变化时,不论如何变化都会执行,不变化不执行

 new Promise((resolve, reject) => {
       reject("reason");
       resolve(123);
     })
       .finally((data) => {
         console.log(data);
       })
       .catch((err) => {});

2.本质

finally()本质上是then()的特例

new Promise((resolve,reject)=>{
        reject("reason")
        resolve(123)
      })
      .finally(
        data=>{
            console.log(data);
        }
      ).catch(err=>{})

      new Promise((resolve,reject)=>{
        reject("reason")
        resolve(123)
      }).then(
        result=>{
            return result;
        },er=>{
            return new Promise((resolve,reject)=>{
                reject(err)
            })
        }
      ).then(
        data=>{
            console.log(data);
        }
      ).catch(err=>{
        console.log(err);
 })

二、构造函数方法

1.resolve和reject

1.Promise.resolve()

成功状态Promise 的一种简写形式

new Promise((resolve) => resolve("foo"));

简写

Promise.resolve('foo')

参数 一般参数

Promise.resolve("foo").then((data) => {
  console.log(data);
});
  promise
const p1 = new Promise((resolve) => {
  setTimeout(resolve, 1000, "执行了");
});
Promise.resolve(p1).then((data) => {
  console.log(data);
});

等价于

p1.then((data) => {
  console.log(data);
});
console.log(Promise.resolve(p1) === p1);

当resolve函数接收的是Promise对象时,后面的then会根据传递的Promise对象的状态变化决定执行哪一个回调

new Promise((resolve) =>
  resolve(p1).then((data) => {
    console.log(data);
  })
);

具有then方法的对象

function func(obj) {
 obj.then(1, 2);
}
func({
 then(a, b) {
   console.log(a, b);
 },
});

具有then方法的对象

const thenable = {
  then(resolve, reject) {
    console.log("then");
    resolve("data");
  },
};
Promise.resolve(thenable).then(
  (data) => console.log(data),
  (data) => console.log(err)
);

2.promise.reject()

失败状态 Promise的一种简写形式

new Promise((resolve, reject) => {
  reject("reason");
});
Promise.reject("reason");

参数 不管什么参数,都会原封不动的向后传递,作为后续方法的参数

const p2=new Promise((resolve)=>{
  setTimeout(resolve,1000,"我被执行了")
})
Promise.reject(p2).catch(err=>console.log(err,82))
new Promise((resolve,reject)=>{
  resolve(123)
}).then(data=>{
return data;
return Promise.reject("reason")
  return Promise.reject('reason')
}).then(data=>{
  console.log(data);
}).catch(err=>{
  console.log(err);
})

2.promise.all

1.有什么用

Promise.all(关注多个Promise对象的状态变化) 传入多个Promise实例,包装成一个新的Promise实例返回

2.基本用法

const delay=ms=>{
   return new Promise(resolve=>{
      setTimeout(resolve,ms)
    })
}
const p1=delay(1000).then(()=>{
   console.log('p1 完成');
   return 'p1'
})

const p2=delay(1000).then(()=>{
   console.log('p2 完成');
    return 'p2'
})

Promise.all()的状态变化与所有传入的Promise实例对象状态有关 所有状态都变成resolved,最终的状态才会变成resolved 只有一个变成rejected,最终的状态就变成rejected

const p=Promise.all([p1,p2])
p.then(data=>{
   console.log(data);
 }),err=>{
   console.log(err);
 }

3.race和allsettled

1.Promise.race()

Promise.race()的状态取决于第一个完成的Promise实例对象, 如果第一个完成的成功了, 那最终的就成功如果第一个完成的失败了,那最终的就失败

  const racePromise = Promise.race([p1, p2]);
      racePromise.then(
        (data) => {
          console.log(data);
        },
        (err) => {
          console.log(err);
        }
      );

2.Promise.allSettled()

Promise.allSettled()的状态与传入的Promise状态无关 永远都是成功的 它会忠实的记录下各个Promise的表现

const allSettledPromise=Promise.allSettled([p1,p2])
      allSettledPromise.then((data)=>{
        console.log(data);
      })
avatar
文章
阅读
粉丝