Promise markdown版

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方法捕获。

扫描二维码关注公众号,回复: 7150983 查看本文章
   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

猜你喜欢

转载自www.cnblogs.com/haimengqingyuan/p/11444155.html