Promise

作者: ticktackkk | 来源:发表于2020-09-16 17:22 被阅读0次
    • 1.es6为什么会出现promise/解决了什么问题
    • 2.promise的使用场景
    • 3.promise的使用方法
    • 4.如何使用

    1.

    JavaScript实现异步执行,在Promise未出现前,我们通常是使用嵌套的回调函数来解决的。但是使用回调函数来解决异步问题,简单还好说,但是如果问题比较复杂,我们将会面临回调金字塔的问题

    杂乱的一些笔记
    1 在封装函数里面使用

    
    

    2 .then()里面的两个参数(第一个是成功的回调,第二个是失败的回调)

    promise.then(
        (ok) => {
          console.log("ok");
        },
        (err) => {
          console.log("im not ok");
        }
      );
    

    3.promise比回调函数好处在哪?
    可以指定回调成功和失败的时间
    比如说

      const p = new Promise((reject, resolve) => {
        setTimeout(() => {
          reject("成功的回调");
        }, 1000);
      });
    
      setTimeout(() => {
        p.then((value) => {
          console.log(value);
        });
      }, 1000);
    

    4.指定一个成功的promise和失败的promise

    const p2=Promise.reject(2)
      const p3=Promise.resolve(3)
    

    5.Promise.all(Array)
    Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。
    只要一个错误就返回rejected,全部为fulfilled返回fulfilled
    返回的是reject或resolve实例的返回值

      const p1 = new Promise((reject, resolve) => {
        setTimeout(() => {
          reject(1);
        }, 1000);
      });
    
      const p2 = Promise.reject(2);
      const p3 = Promise.resolve(3);
      const all = Promise.all([p1, p3]);
      all.then(
        (value) => console.log("成功的数据" + value),//1 2
        (reason) => console.log("失败的原因" + reason)
      );
    

    6.Promise.race([])
    race之中有一个实例率先改变状态,他的实例对象就跟着改变

      const p1 = new Promise((reject, resolve) => {
        setTimeout(() => {
          reject(1);
        }, 1000);
      });
    
      const p2 = Promise.reject(2);
      const p3 = Promise.resolve(3);
      const all = Promise.rece([p1,p2 p3]);
      pRace.then(
        (value) => console.log(value)
        (reason) => console.log(reason)
      );
    

    手写一个promise----未完成

    (function (window) {
      function Promise(excutor) {
        //执行器函数(同步执行)
        (this.status = "pading"), //指定初始值为pading
          (this.data = undefined), //给promise对象指定一个用于存储结果数据的值
          (this.callbacks = []); //每个元素的结构[onResolved(){},onRejected(){}]
    
        function resolve(value) {
            //如果状态值不是pading,直接结束
          if (this.status !== "pading") return;
    
          //将状态改变为resolved
          this.status = "resolved";
          //保存value的数据
          this.data = value;
    
          //如果有待执行的callbacks函数,立即执行异步回调函数onResolved
          if (this.callbacks.length > 0) {
            setTimeout(() => {
              //放入队列中所有成功的回调
              this.callbacks.forEach((callbacksObj) => {
                //使其异步执行
                callbacksObj.onResolved(value);
              });
            }, 0);
          }
        }
        function reject(reason) {
            //如果状态值不是pading,直接结束
          if (this.status !== "pading") return;
          //将状态改变为rejected
          this.status = "rejected";
          //保存value的数据
          this.data = reason;
    
          //如果有待执行的callbacks函数,立即执行异步回调函数onRejected
          if (this.callbacks.length > 0) {
            setTimeout(() => {
              //放入队列中所有成功的回调
              this.callbacks.forEach((callbacksObj) => {
                //使其异步执行
                callbacksObj.onRejected(reason);
              });
            }, 0);
          }
        }
        try {//如果执行器抛出异常,我们就执行reject(),promise对象变为失败
            excutor(resolve, reject); //立即同步执行excutor
        } catch (error) {
            reject(error)
        }
      }
      //指定一个新的成功或者失败的prmise的对象
      Promise.prototype.then = function (onResolve, onReject) {};
      Promise.prototype.then = function (onReject) {};
      //返回一个指定结果成功或者失败的promise
      Promise.resolve = function (value) {};
      Promise.reject = function (reason) {};
      //返回一个promise,只有当所有成功是才成功,否则失败
      Promise.all = function (promises) {};
      //返回一个promise,结果有第一个完成的promise决定
      Promise.race = function (promises) {};
    
      window.Promise = Promise;
    })(window);
    
    

    相关文章

      网友评论

          本文标题:Promise

          本文链接:https://www.haomeiwen.com/subject/zvlfyktx.html