• es6之Promise


    在说promise之前有一些背景了解一下

    1. jQuery从v1.5之后的版本都提供了Deferred方法,$.Deferred()会返回一个对象,包含有resolve、reject和done、fail、then方法;
    2. resolve、reject是主动触发改变状态的函数;
    3. done、fail、then是状态改变之后才触发的监听函数;
    4. $.Deferred().promise()返回一个promise对象,相比于deferred对象,缺少了resolve和reject这俩函数;
      function foo() {
          var d = $.Deferred()
          var wait = function (dtd) {
              var task = function () {
                  console.log('done')
                  d.resolve()
              }
              setTimeout(task, 2000)
              return d.promise()  
          }
          return wait(d)
      }
      
      var f = foo() 
      $.when(f)
       .then(function () {
          console.log(1)
       })
       .then(function () {
          console.log(2)
       })

    Promise

    1. Promise是一个对象,从它可以获取异步操作的消息;
    2. 特点:对象的状态不受外界影响(Pending进行中、Resolved完成、Rejected失败),只有异步操作的结果可以决定当前状态;一旦状态改变就不会再变(只能从Pending到Resolved和Pending到Rejected);
    3. 缺点:一旦创建就会立即执行无法中途取消;如果没有回调函数,内部抛出的错误无法反映到外部;当处于Pending时,无法得知目前进展到哪一阶段;
    4. 一般不要在then方法里面定义Reject状态的回调函数(即then的第二个参数),而是使用catch方法;因为这种可以捕获前面then中的错误,也更接近同步写法(try/catch)
    5. 立即 resolved 的 Promise 是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。一般来说,调用resolvereject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolvereject的后面。所以,最好在它们前面加上return语句,这样就不会有意外;Promise 内部的错误不会影响到 Promise 外部的代码,通俗的说法就是“Promise 会吃掉错误”;
    6. catch方法返回的还是一个 Promise 对象,因此后面还可以接着调用then方法;catch方法之中,还能再抛出错误
    7. Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例;Promise.all方法的参数可以不是数组,但必须具有Iterator接口,且返回的每个成员都是Promise实例;只有p1 p2 p3状态都变成fulfilled,p状态才会变成fulfilled;只要有一个rejected,p就变成rejected;
    8. Promise.race也是将多个Promise实例包装成新的Promise;只要有一个对象状态变了,p状态就会跟着变,返回先改变的对象的值传给p的回调函数;
    9. Promise.resolve将对象转为Promise对象,状态为resolved
      // 将thenable对象转为Promise对象
      
      var thenable = {
          then(resolve, reject) {
              resolve(200)
          }
      }
      
      var p = Promise.resolve(thenable)
      
      p.then((data) => {
        console.log(data)
      })  // 200
    10. Promise.reject返回一个Promise对象,该实例状态为rejected;这个方法方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。
    11. 两个附加方法
      // done
      Promise.prototype.done = function(onFulfilled, onRejected) {
          this.then(onFulfilled, onRejected)
              .catch(function(reason) {
                  setTimeout(() => {throw reason}, 0)   
              });
      };
      
      // finally
      Promise.prototype.finally = function (callback) {
          let P = this.constructor;
          return this.then(
              value  => P.resolve(callback()).then(() => value),
              reason => P.resolve(callback()).then(() => { throw reason })
          );
      };

      done用于捕获任何时候可能出现的错误,并全局抛出;
      finally用于不管Promise对象状态如何,都会执行的操作,接受一个普通的回调函数作为参数(必执行);

    12. 用promise改造ajax
      const ajax = function(url){
        const p = new Promise((resolve, reject) => {
          const handler = function(){
            if(this.readyState !== 4){
              return;
            }
            if(this.status === 200 || this.status === 304){
              resovle(this.responseText)
            }else{
              reject(new Error(this.statusText))
            }
          }
          const xhr = new XMLHttpRequest();
          xhr.open('get', url);
          xhr.onreadystatechange = handler;
          xhr.responseType = "json";
          xhr.setRequestHeader("Accept", "application/json");
          xhr.send();
        });
        return p;
      }
      ajax(url).then().catch();
    13. 用promise改造fs.readFile
      function readFile(file) {
        return new Promise(function(resolve, reject) {
          fs.readFile(file, 'utf8', function(err, data) {
            if(err) {
              reject(err);
            } else {
              resolve(data);
            }
          });
        });
      }
      readFile(file).then().catch();
  • 相关阅读:
    百度地图学习
    JS中call和apply区别有哪些 记录
    初次学习AngularJS
    C#中Abstract和Virtua笔记,知识
    css学习笔记四
    css学习笔记三
    jquery基础 笔记三
    jquery基础 笔记二
    jquery基础 笔记一
    负边距在布局中的应用
  • 原文地址:https://www.cnblogs.com/colima/p/6925986.html
Copyright © 2020-2023  润新知