ES6 - promise

一、promise 基本用法

主要用于异步计算,避免界面冻结: 相当于把异步回调逻辑搬移到then后面。

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)
 

resolve和reject它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败来决定调用哪一个
如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，后续的then会被回调。
如果是失败的，那么通常我们会调用reject(error)，这个时候，后续的catch会被回调。

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()


promise状态一经改变，不会再变。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
        /* new Promise((resolve,reject) => {
            setTimeout(()=>{
                //resolve('hello world')
                reject('error message')
            },1000);
        }).then((data) => {
            console.log(data)
        }).catch((data)=>{
            console.log(data)
        }) */
        
        new Promise((resolve,reject) => {
            //setTimeout(()=>{resolve('hlee')},1000)
            setTimeout(()=>{reject('faile')},1000)
        }).then(data=>{
            console.log(data)
        },err=>{
            console.log(err)
        })
            
        </script>
    </body>
</html>

二、promise 静态方法

Promise.all(iterable)这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。
let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})

　需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

Promise.resolve(value)返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果您不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。
Promise.reject(reason)返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法
 

三、promise 链式调用

一般是第一层Promise返回 new promise((resolve,reject)=>{return new Promise((resolve)=>{resolve('ccccc')})}) 
一种简写方式是直接return 'cc' 会自动转换成 new promise

 

 .

posted on 2021-05-14 10:09  TrustNature  阅读(48)  评论(0)  编辑  收藏  举报