zoukankan      html  css  js  c++  java
  • 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方法捕获。

       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

  • 相关阅读:
    获取JVM的dump文件
    jmeter正则表达式提取器提取特定字符串后的全部内容
    mysql数据库开启慢查询日志
    正则中需要转义的特殊字符
    LoadRunner 调用Dll完成加密解密
    压缩十进制数据的一次实践
    记Judith此人和我对美国教育的感触
    在 sql server 中,不允许用户查看到所有数据库
    在 asp.net core 中使用 HttpContext.Current
    nginx 配置将某站点所有页面指向一个路径
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/11444155.html
Copyright © 2011-2022 走看看