Promise markdown版

Posted 2022-09-21 haimengqingyuan

Promise

Promise是一个对象，里面保存着某个未来才会结束的事情，从其可以获得一个异步操作的消息；其总会返回一个结果，可能成功也可能失败；可以理解成一个构造韩，用来生成一个Promise实例；

---

Promise对象是一个异步操作，有三种状态：pending/fulfilled/rejected

Promise对象的状态改变：从pending到fulfilled和从pending到rejected

无法取消Promise；若不设置回调则Promise内部抛出的错误无法反映到外部；当pending时无法知道进展到哪一步了

    const promise = new Promise(function(resolve, reject) 
        if(success) 
            resolve(value)
         else 
            reject(error)
        
    )

Promise构造函数接收一个函数作为参数，该函数的两个参数分别是resolve和reject：

• resolve函数作用是将Promise对象的状态从pending到fulfilled，在异步操作成功的时候调用，并将异步操作结果作为参数传递出去；
• reject函数作用，将promise对象的状态从pending变成rejected；

Promise实例生成之后，可以使用then方法分别指定resolve状态和rejected状态的回调函数；

    promise.then(function(value)
        console.log('success')
    ,function(error)
        console.log('error')
    )

then接收两个回调函数作为参数：第一个参数为promise对象的状态变为resolved的时候调用；第二个参数是promise对象的状态变为rejected时调用；（第二个参数可选）

---

Promise新建后会立即执行

  let promise = new Promise(function(resolve, reject) 
      console.log('Promise')
      resolve()
  )
  promise.then(function() 
      console.log('resolved')
  )
  console.log('Hi')
  //Promise
  //Hi
  //resolved

Promise新建后会立即执行，所以首先输出Promise，然后then方法指定回调函数，将在当前脚本所有同步任务执行完成后才会执行，所以resolved最后输出；

---

Promise.prototype.then()

> * Promise实例的then方法是定义在原型对象上的，其作用是为Promise实例添加状态改变时的回调函数resolved-rejected；
> * 其then方法返回的是一个新的Promise实例(非原Promise实例)，可以采用then的链式调用，即then后面再调then方法
> * 采用链式的then可以指定一组按照顺序调用的回调函数，前一个回调函数可能返回一个还是Promise对象，这时一个回调函数就会等该Promise对象的状态发生变化，才会被调用；

     getJSON('/*').then(function(post)
         return getJSON(post.commentURL)
     ).then(function funA()
         console.log('resolved:', comments)
     , function funB(err)
         console.log('rejected:', err)
     )

ps:第一个then指定的回调函数，返回的是一个Promise对象，这时第二个指定的回调函数就会等待这个新的Promise对象发生变化，若变为resolved就调用funcA，状态变为rejected就调用funcB
***

Promise.prototype.catch()

>     Promise.prototype.catch()是.then(null, rejection)的别名，用于指定发生错误时的回调函数；

    getJSON('*').then(function(posts)

    ).catch(function()
        console.log('error')
    )

getJSON方法返回一个Promise对象，如果该对象状态变为resolved，则会调用then方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数。另外，then方法指定的回调函数，如果运行抛出错误，也会被catch方法捕获。

   p.then(val => console.log('fulfilled:', val))
       .catch(err => console.log('rejected:', err))

   等价

   p.then(val => console.log('fulfilled:', val))
       .then(err => console.log('rejected:', err))

Promise对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止，也就是说错误总会被下一个catch语句捕获。

---

Promise.prototype.finally()

>  finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。

---

Promise.all

>  Promise.all(iterable)方法返回一个Promise实例，此实例在iterable参数内所有的promise都resolved或参数中不包含promise时回调完成，若参数中有一个rejected，此实例回调失败reject，失败原因是第一个失败promise的结果

   let t1 = new Promise((resolve,reject)=>
       resolve("t1-success")
   )
   let t2 = new Promise((resolve,reject)=>
       resolve("t2-success")
   )
   let t3 =Promise.reject("t3-error");
   Promise.all([t1,t2,t3]).then(res=>
       console.log(res)
   ).catch(error=>
       console.log(error)
   )
   //打印出来是t3-error

Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示一个loading图标。
Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。在前端请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all;

---

Promise.race(iterable)

> Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。
> Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

参考 & 感谢：

https://mp.weixin.qq.com/s?__biz=MzU3NjczNDk2MA==&mid=2247484501&idx=1&sn=022dc4845cfce89fe4e0f3845b4b4a0d&chksm=fd0e17caca799edc6519df774c3dbe9066dd0d8a2f195cff7d34e13f1c611497ada5bd4063eb&mpshare=1&scene=1&srcid=&sharer_sharetime=1566973470093&sharer_shareid=e92e5a79fa57c79c7365ded488c3cc3f&key=26d05b32e0df58c254a97cc6182b5e2bfaa6091434a6f104a22a95431b494bff7a58c65789f0517993146087f7ea8295c37760f60b2cdd7aa43a47a5855cacb1a1a52ff78d0ddbae24daa8e418cb6f07&ascene=1&uin=MjgyMDM0NzIzMQ%3D%3D&devicetype=Windows+10&version=62060833&lang=zh_CN&pass_ticket=NYo3dn8qF40PMhYOd168PBUHmCvtn5ZQPbMAcM71cDEo7EnwHqpuXwYHr4t%2FMX9s