北极光之夜。
北极光之夜。

前端Promise总结笔记

目录

    • 一.什么是Promise：
    • 二.为啥使用Promise：
    • 三. promise初体验：
    • 四：promise体验ajax请求：
    • 五：Promise封装ajax请求：
    • 六：promise的状态改变：
    • 七：Promise基本流程图：
    • 八：Promise的API 使用：
            • 1. Promise 的构造函数：Promise（executor）{}
            • 2. Promise.prototype.then 方法: (onResolved, onRejected)=> {}
            • 3.Promise.prototype.catch万法: (onRejected) => {}
            • 4. Promise.resolve 方法: (value)=> {}
            • 5. Promise.reject 方法: (reason) => {}
            • 6. Promise.all 方法: (promises)=> {}
            • 7. Promise.race 方法: (promises)=> {}
    • 九：使用Promise面临的关键问题：
            • 1.如何改变 promise的状态?
            • 2.一个 promise指定多个成功/失败回调函数,都会调用吗?
            • 4. promise.then（）返回的新promise的结果状态由什么决定?
            • 5. promise 如何串连多个操作任务?
            • 6. promise 的异常穿透。
            • 7.中断 promise链。
    • 十：Promise的自定义封装：
            • 1.初始化结构搭建：
            • 2. 搭建resolve与reject结构：
            • 3. 实现resolve与reject函数：
            • 4. throw抛出异常改变状态：
            • 5. 设定Promise对象状态只能修改一次：
            • 6. then（）方法执行回调：
            • 7.执行异步任务回调：
            • 8.能执行多个回调：
            • 9.同步任务 then（）的返回结果：
            • 10.异步任务 then（）的返回结果：
            • 11. 完善then（）方法与优化：
            • 12. 实现catch方法与异常穿透：
            • 13. 封装Promise.resolve（）方法：
            • 14. 封装Promise.reject方法：
            • 15. 封装Promise.all方法：
            • 16. 封装Promise.race方法：
            • 17.回调函数异步执行：
            • 18.class版本封装：
    • 十一：async函数：
            • 1.返回一个非Promise对象，返回值是resolve。
            • 2.如果返回是一个Promise对象，由返回结果决定：
            • 3.抛出异常也是失败：
    • 十二.await表达式：
            • 1.右侧为promise对象：
            • 2.右侧为其它值：
            • 3.如果promise是失败状态：
    • 十三.async与await结合发生ajax请求：
    • 十四.总结：

一.什么是Promise：

  1. Promise 是在 js 中进行异步编程的新解决方案。（以前旧的方案是单纯使用回调函数）
  2. 从语法来说，promise是一个构造函数。
  3. 从功能来说，promise对象用来封装一个异步操作，并且可以获得成功或失败的返回值。
  4. JS中的常见的异步操作：定时器，AJAX中一般也是异步操作（也可以同步），回调函数可以理解为异步（不是严谨的异步操作）…等。
    剩下的都是同步处理

二.为啥使用Promise：

  1. promise使用回调函数更灵活。旧的回调函数必须在启动异步任务前指定。
  2. promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至能在异步任务结束后指定多个）
  3. promise支持链式调用，可以解决回调地狱问题。（回调地狱就是多层回调函数嵌套使用，就是套娃，这样就不利于阅读和异常处理。）

三. promise初体验：

效果：点击一个按钮，有30%概率显示中奖。
实现： 点击按钮后得到一个1到100间的随机数，小于等于30输出中奖，否则输出没中。期间用定时器模拟异步操作，在定时器里执行判断。
（1）基础的写法：

<button id="btn">clickbutton>

    <script>
        var btn = document.querySelector("#btn");
    // 该函数返回一个两数之间的随机整数，包括两个数在内
    function getRandomIntInclusive(min, max) {
     
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    }
    // 点击事件
     btn.addEventListener('click',function(){
     
         // 1秒的定时器，模拟异步操作
         setTimeout(() => {
     
             // 得到1到100间的一个数
             let n = getRandomIntInclusive(1, 100);
             if (n <= 30) {
     
                 alert('中奖喽');
             } else {
     
                 alert('没中奖');
             }
         }, 1000);
     })
    </script>

前端Promise总结笔记_第1张图片
（2）promise写法，在promise里封装一个异步操作。

    <script>
        var btn = document.querySelector("#btn");
    // 得到一个两数之间的随机整数，包括两个数在内
    function getRandomIntInclusive(min, max) {
     
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    }
    // 点击事件
     btn.addEventListener('click',function(){
     
         // 下面是promise ，resolve表示解决，reject表示拒绝 ，都是函数类型数据。
         const p = new Promise((resolve,reject) => {
     
             setTimeout(()=>{
     
                  let n = getRandomIntInclusive(1, 100);
                  if(n<=30){
     
                      resolve(); //将promise状态设为 “成功”
                  }else{
     
                      reject(); //将promise状态设为 “失败”
                  }
             },1000)
         });
         // 调用then方法
         p.then(()=>{
     
             // “成功”执行这步
            alert('中奖喽');
         },()=>{
     
             // “失败”执行这步
            alert('没中奖');
         })
     })

假如要在上面输出结果后加上选中的号码：
因为.then（）里并不能直接获得 n，所以在resolve与reject里把n当结果值返回。

 // 点击事件
     btn.addEventListener('click',function(){
     
         // 下面是promise ，resolve表示解决，reject表示拒绝 ，都是函数类型数据。
         const p = new Promise((resolve,reject) => {
     
             setTimeout(()=>{
     
                  let n = getRandomIntInclusive(1, 100);
                  if(n<=30){
     
                      resolve(n); //将promise状态设为 “成功”，并把结果值n返回
                  }else{
     
                      reject(n); //将promise状态设为 “失败”，并把结果值n返回
                  }
             },1000)
         });
         // 调用then方法
         // value为值的意思，reason为理由的意思，都是形参
         p.then((value)=>{
     
             // “成功”执行
            alert('中奖喽'+value);
         },(reason)=>{
     
             // “失败”执行
            alert('没中奖'+reason);
         })
     })

前端Promise总结笔记_第2张图片

四：promise体验ajax请求：

这是一个开源社区的api文档，有许多api。
效果：点击按钮获得一句名言在控制台输出。
基础写法：

 <script>
        var btn = document.querySelector("#btn");
    // 点击事件
      btn.addEventListener('click',function(){
     
         //创建对象
         const xhr = new XMLHttpRequest();
         //初始化
         xhr.open('GET',"http://poetry.apiopen.top/sentences");
         //发送
         xhr.send();
         //处理响应结果
         xhr.onreadystatechange = function(){
     
             if(xhr.readyState === 4){
     
                 if(xhr.status >=200 && xhr.status < 300){
     
                     //输出响应体
                     console.log(xhr.response);
                 }else{
     
                     //输出响应状态码
                     console.log(xhr.status);
                 }
             }
         }
     })
    </script>

前端Promise总结笔记_第3张图片
promise封装：

 // 点击事件
     btn.addEventListener('click',function(){
     
         const p = new Promise((resolve,reject) => {
     
              //创建对象
         const xhr = new XMLHttpRequest();
             //初始化
             xhr.open('GET', "http://poetry.apiopen.top/sentences");
             //发送
             xhr.send();
             //处理响应结果
             xhr.onreadystatechange = function () {
     
                 if (xhr.readyState === 4) {
     
                     if (xhr.status >= 200 && xhr.status < 300) {
     
                         //输出响应体
                        resolve(xhr.response);
                     } else {
     
                         //输出响应状态码
                         reject(xhr.status);
                     }
                 }
             }
         })
         p.then(value=>{
     
              console.log(value);
         },reason=>{
     
             //控制台输出警告信息
               console.warn(reason);
         })
     })

前端Promise总结笔记_第4张图片
若把接口写错：
前端Promise总结笔记_第5张图片

五：Promise封装ajax请求：

跟上一步差不多。就是把其封装在一个sendAJAX（）的自定义函数里。


function sendAJAX(url) {
     
         return new Promise((resolve, reject) => {
     
                //创建对象
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                //初始化
                xhr.open('GET', url);
                //发送
                xhr.send();
                //处理响应结果
                xhr.onreadystatechange = function () {
     
                    if (xhr.readyState === 4) {
     
                        if (xhr.status >= 200 && xhr.status < 300) {
     
                            //输出响应体
                            resolve(xhr.response);
                        } else {
     
                            //输出响应状态码
                            reject(xhr.status);
                        }
                    }
                }
            });
     }
      
     sendAJAX("http://poetry.apiopen.top/sentences")
     .then(value=>{
     
              console.log(value);
         },reason=>{
     
             //控制台输出警告信息
               console.warn(reason);
         })

六：promise的状态改变：

promise状态表示实例对象的一个属性【PromiseState】。包括以下值：
（1）pending 未决定的
（2）resolved 或 fullfilled 成功
（3）rejected 失败
Promise对象的值表示实例对象的另一个属性【PromiseResult】。保存着对象【成功/失败】的结果。而其状态改变只有以下两种可能：
（1）pending 变为resolved
（2）pending 变为 rejected
注：一个promise对象只能改变一次，无论成功或失败都会有一个结果数据，成功的称为 value ， 失败的称为 reason 。

七：Promise基本流程图：

前端Promise总结笔记_第6张图片

八：Promise的API 使用：

1. Promise 的构造函数：Promise（executor）{}

（1）executor 函数：执行器 （resolve，reject）=> {}。
（2）resolve 函数：内部定义成功时调用函数 value => {} 。
（3）reject 函数：内部定义失败时调用函数 reason => {} 。
注意：Promise内部会立同步即调用executor，异步操作在执行器里执行。

2. Promise.prototype.then 方法: (onResolved, onRejected)=> {}

(1) onResolved 函数:成功的回调函数 (value) => {}
(2) onRejected 函数:失败的回调函数 (reason) => {}
注:指定用于得到成功value的成功回调和用于得到失败reason的失败回调是返回一个新的promise对象。

3.Promise.prototype.catch万法: (onRejected) => {}

onRejected.函数: 失败的回调函数**(reason)=> {}**
注：只是失败的调用。then()的语法糖，相当于: then(undefined, onRejected)。

4. Promise.resolve 方法: (value)=> {}

value: 成功的数据或promise对象
注:如果传入的参数为非Promise类 型的对象，则返回的结果为成功promise对象，如果传入的参数为Promise 对象，则参数的结果决定了resolve 的结果。

5. Promise.reject 方法: (reason) => {}

reason: 失败的原因
注:无论传入啥只返回一个失败的promise对象。

6. Promise.all 方法: (promises)=> {}

promises: 包含n个promise的数组
注:返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败。失败了返回那个失败值。

7. Promise.race 方法: (promises)=> {}

promises: 包含n个promise的数组
注:返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态。
来一个例子：

 let p1 = new Promise((resolve,reject)=>{
     
          setTimeout(()=>{
     
              resolve('yes');
          },1000)
      })
      let p2 = Promise.resolve('success');
      let p3 = Promise.resolve('come');

      const result = Promise.race([p1,p2,p3]);
      console.log(result);

前端Promise总结笔记_第7张图片

九：使用Promise面临的关键问题：

1.如何改变 promise的状态?

(1) resolve(value): 如果当前是pending就会变为resolved。
(2) reject(reason): 如果当前是pending就会变为rejected。
(3)抛出异常 throw :如果当前是pending就会变为rejected。

 let p1 = new Promise((resolve,reject)=>{
     
           //  resolve('success');
         //    reject('error');
          //   throw 'error';
      })
2.一个 promise指定多个成功/失败回调函数,都会调用吗?

当promise改变为对应状态时都会调用。

 let p = new Promise((resolve,reject)=>{
     
            resolve('success');
      })
      // 第一次回调
      p.then(value=>{
     
          console.log("yes");
      })
      // 第二次回调
      p.then(value=>{
     
          console.log("oh yes");
      })

前端Promise总结笔记_第8张图片
3.改变 promiseT状态和指定回调函数谁先谁后?

(1)都有可能， 正常情况下是先指定回调再改变状态,但也可以先改状态再指定回调
(2)如何先改状态再指定回调?
①在执行 器中直接调用resolve(/reject()；
②延迟更 长时间才调用then()；
(3)什么时候才能得到数据?
①如果先指定的回调， 那当状态发生改变时,回调函数就会调用,得到数据
②如果先改变的状态, 那当指定回调时,回调函数就会调用,得到数据

4. promise.then（）返回的新promise的结果状态由什么决定?

(1)简单表达: then（）指定的回调函数执行的结果决定。
(2)详细表达:
*如果抛出异常， 新promise变为rejected, reaon为抛出的异常。
*如果返回的是非prormise的任意值,新promise变为resolved, value为返回的值。
*如果返回的是另一个新promise,此promise的结果就会成为新promise的结果。

随笔：

let p = new Promise((resolve,reject) => {
     
            // resolve('success'); 
           // reject('No'); 
          //  throw 'oh no';
      });    
      let result = p.then(value => {
     
           console.log(value);
      }, reason => {
     
           console.warn(reason);   
      });     
      console.log(result);
5. promise 如何串连多个操作任务?

(1) promise 的then()返回一个新的promise,可以开成then(）的链式调用。
(2)通过then的链式调用串连多个同步/异步任务。

 let p =new Promise((resolve,reject) => {
     
          resolve("yes");
     })
     p.then(value => {
     
          return new Promise((resolve,reject)=>{
     
              resolve("oh yes~");
          });
     }).then(value => {
     
          console.log(value);
     })

输出结果：
oh yes~

 let p =new Promise((resolve,reject) => {
     
          resolve("yes");
     })
     p.then(value => {
     
          return new Promise((resolve,reject)=>{
     
              resolve("oh yes~");
          });
     }).then(value => {
     
          console.log(value);
     }).then(value => {
     
          console.log(value);
     })

输出结果：
oh yes~
undefined

6. promise 的异常穿透。

(1)当使用promise的then链式调用时,可以在最后指定失败的回调。
(2)前面任何操作出 了异常,都会传到最后失败的回调中处理。

 let p =new Promise((resolve,reject) => {
     
         setTimeout(()=>{
     
            resolve("yes");
         },1000);
     })
     p.then(value => {
     
          throw 'oh No';
     }).then(value => {
     
          console.log("123");
     }).then(value => {
     
          console.log("456");
     }).catch(reason=>{
     
         console.warn(reason);
     })

输出结果：
oh No

7.中断 promise链。

(1)当使用promise的then链式调用时,在中间中断,不再调用后面的回调函数。
(2)办法:在回调函数中返回一个pendding状态的promise对象。

未中断：

 let p =new Promise((resolve,reject) => {
     
         setTimeout(()=>{
     
            resolve("yes");
         },1000);
     })
     p.then(value => {
     
          console.log("789");
     }).then(value => {
     
          console.log("123");
     }).then(value => {
     
          console.log("456");
     }).catch(reason=>{
     
         console.warn(reason);
     })

输出结果：
789
123
456

中断：

 let p =new Promise((resolve,reject) => {
     
         setTimeout(()=>{
     
            resolve("yes");
         },1000);
     })
     p.then(value => {
     
          console.log("789");
          return new Promise(()=>{
     });
     }).then(value => {
     
          console.log("123");
     }).then(value => {
     
          console.log("456");
     }).catch(reason=>{
     
         console.warn(reason);
     })

输出结果：
789

十：Promise的自定义封装：

1.初始化结构搭建：
 // 自定义函数 Promise
     function Promise(executor){
     

     }
     // 添加then方法
     Promise.prototype.then = function(onResolved,onRejected){
     
         
     }

注：prototype 属性使您有能力向对象添加属性和方法。

2. 搭建resolve与reject结构：
 // 自定义函数Promise
     function Promise(executor){
     
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     

          }
          //自定义reject函数
          function reject(data){
     

          }
          //同步调用【执行器函数】
          executor(resolve,reject);          
     }
     // 添加then方法
     Promise.prototype.then = function(onResolved,onRejected){
     
         
     }
3. 实现resolve与reject函数：
 // 自定义函数Promise
     function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolved 
             //改变结果值属性
             that.PromiseResult =data;
          }
          //自定义reject函数
          function reject(data){
     
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
          }
          //同步调用【执行器函数】
          executor(resolve,reject);          
     }
     // 添加then方法
     Promise.prototype.then = function(onResolved,onRejected){
     
         
     }
4. throw抛出异常改变状态：

采用 try{ }catch(){ } 与throw一起使用。

// 自定义函数Promise
 function Promise(executor){
     
      //添加状态属性与结果值属性
      this.PromiseState = 'pending';
      this.PromiseResult = null;
       //保存实例对象的this值
       const that = this;
      //自定义resolve函数,名字不一定用resolve
      function resolve(data){
     
         //改变状态属性
         that.PromiseState = 'fulfilled';  // 或者 resolve 
         //改变结果值属性
         that.PromiseResult =data;
      }
      //自定义reject函数
      function reject(data){
     
          //改变状态属性
         that.PromiseState = 'rejected';  
        //改变结果值属性
         that.PromiseResult =data;
      }

      try{
     
      //同步调用【执行器函数】
      executor(resolve,reject);
      }catch(e){
     
          //更改Promise对象为失败
          reject(e);
      }
      
 }
 // 添加then方法
 Promise.prototype.then = function(onResolved,onRejected){
     
     
 }

注：throw语句抛出一个错误。

5. 设定Promise对象状态只能修改一次：

加个判断就好。

// 自定义函数Promise
     function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function(onResolved,onRejected){
     
         
     }
6. then（）方法执行回调：
  // 自定义函数Promise
     function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function(onResolved,onRejected){
     
         //如果Promise状态为fulfilled回调这个函数
         if(this.PromiseState === 'fulfilled'){
     
             //将结果值传入
            onResolved(this.PromiseResult);
         }
         //如果Promise状态为rejected回调这个函数
         if(this.PromiseState === 'rejected'){
     
             //将结果值传入
            onRejected(this.PromiseResult);
         }
     }
7.执行异步任务回调：

异步任务一般先回调才改变状态。所以第6步的代码执行顺序就无法执行异步回调，解决如下：

// 自定义函数Promise
 function Promise(executor){
     
      //添加状态属性与结果值属性
      this.PromiseState = 'pending';
      this.PromiseResult = null;
      // 定义callback属性，保存pending状态的回调函数
      this.callback = {
     };
       //保存实例对象的this值
       const that = this;
      //自定义resolve函数,名字不一定用resolve
      function resolve(data){
     
        //判断状态是否修改过
        if(that.PromiseState !== 'pending') return;
         //改变状态属性
         that.PromiseState = 'fulfilled';  // 或者 resolve 
         //改变结果值属性
         that.PromiseResult =data;
          //异步任务成功后执行回调函数
          if(that.callback.onResolved){
     
             that.callback.onResolved(data);
         }
      }
      //自定义reject函数
      function reject(data){
     
         //判断状态是否修改过,改过就直接返回
        if(that.PromiseState !== 'pending') return;
          //改变状态属性
         that.PromiseState = 'rejected';  
        //改变结果值属性
         that.PromiseResult =data;
         //异步任务失败后执行回调函数
         if(that.callback.onRejected){
     
             that.callback.onRejected(data);
         }
      }

      try{
     
      //同步调用【执行器函数】
      executor(resolve,reject);
      }catch(e){
     
          //更改Promise对象为失败
          reject(e);
      }
      
 }
 // 添加then方法
 Promise.prototype.then = function(onResolved,onRejected){
     
     //如果Promise状态为fulfilled回调这个函数
     if(this.PromiseState === 'fulfilled'){
     
         //将结果值传入
        onResolved(this.PromiseResult);
     }
     //如果Promise状态为rejected回调这个函数
     if(this.PromiseState === 'rejected'){
     
         //将结果值传入
        onRejected(this.PromiseResult);
     }
      //如果Promise状态为pending,保存回调函数
      if(this.PromiseState === 'pending'){
     
        this.callback = {
     
            onResolved: onResolved,
            onRejected: onRejected
        }
     }
 }
8.能执行多个回调：

用第7步写法指定多个回调时，最后一个then回调会覆盖掉前面的，解决如下，把保存回调函数的callbacks变为一个数组：

// 自定义函数Promise
     function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
              //异步任务成功后执行回调函数
              that.callbacks.forEach(item=>{
     
                  item.onResolved(data);
              })
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
             //异步任务失败后执行回调函数
            that.callbacks.forEach(item=>{
     
                item.onRejected(data);
            })
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function(onResolved,onRejected){
     
         //如果Promise状态为fulfilled回调这个函数
         if(this.PromiseState === 'fulfilled'){
     
             //将结果值传入
            onResolved(this.PromiseResult);
         }
         //如果Promise状态为rejected回调这个函数
         if(this.PromiseState === 'rejected'){
     
             //将结果值传入
            onRejected(this.PromiseResult);
         }
          //如果Promise状态为pending,保存回调函数
          if(this.PromiseState === 'pending'){
     
            this.callbacks.push({
     
                onResolved: onResolved,
                onRejected: onRejected
            })
         }
     }

forEach（）方法

9.同步任务 then（）的返回结果：

就是在then（）里有实现有结果返回：

const result = p.then(value => {
     
          console.log(value);
     },reason => {
     
         console.warn(reason);
     }) 
console.log(result);

解决：

// 自定义函数Promise
function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
              //异步任务成功后执行回调函数
              that.callbacks.forEach(item=>{
     
                  item.onResolved(data);
              })
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
             //异步任务失败后执行回调函数
            that.callbacks.forEach(item=>{
     
                item.onRejected(data);
            })
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function (onResolved, onRejected) {
     
            return new Promise((resolve, reject) => {
     
                //如果Promise状态为fulfilled回调这个函数
                if (this.PromiseState === 'fulfilled') {
     
                    try {
     
                        //获取回调函数执行结果
                        let result = onResolved(this.PromiseResult);
                        //判断
                        if (result instanceof Promise) {
     
                            //如果是Promise对象
                            result.then(v => {
     
                                resolve(v);
                            }, r => {
     
                                reject(r);
                            })
                        } else {
     
                            //结果对象状态为【成功】
                            resolve(result);
                        }
                    } catch (e) {
     
                        reject(e);
                    }
                }
                //如果Promise状态为rejected回调这个函数
                if (this.PromiseState === 'rejected') {
     
                    //将结果值传入
                    onRejected(this.PromiseResult);
                }
                //如果Promise状态为pending,保存回调函数
                if (this.PromiseState === 'pending') {
     
                    this.callbacks.push({
     
                        onResolved: onResolved,
                        onRejected: onRejected
                    })
                }
            })
        }

注：instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

10.异步任务 then（）的返回结果：

(´ཀ`」 ∠)
用第9步执行异步任务return返回的会是pending状态。
解决：

// 自定义函数Promise
function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
              //异步任务成功后执行回调函数
              that.callbacks.forEach(item=>{
     
                  item.onResolved(data);
              })
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
             //异步任务失败后执行回调函数
            that.callbacks.forEach(item=>{
     
                item.onRejected(data);
            })
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function (onResolved, onRejected) {
     
         const that = this;
            return new Promise((resolve, reject) => {
     
                //如果Promise状态为fulfilled回调这个函数
                if (this.PromiseState === 'fulfilled') {
     
                    try {
     
                        //将结果值传入
                        let result = onResolved(this.PromiseResult);
                        //判断
                        if (result instanceof Promise) {
     
                            //如果是Promise对象
                            result.then(v => {
     
                                resolve(v);
                            }, r => {
     
                                reject(r);
                            })
                        } else {
     
                            //结果对象状态为【成功】
                            resolve(result);
                        }
                    } catch (e) {
     
                        reject(e);
                    }
                }
                //如果Promise状态为rejected回调这个函数
                if (this.PromiseState === 'rejected') {
     
                    //将结果值传入
                    onRejected(this.PromiseResult);
                }
                //如果Promise状态为pending,保存回调函数
                if (this.PromiseState === 'pending') {
     
                    this.callbacks.push({
     
                        onResolved: function () {
     
                            try {
     
                                //执行成功回调函数
                                let result = onResolved(that.PromiseResult);
                                //判断
                                if (result instanceof Promise) {
     
                                    result.then(v => {
     
                                        resolve(v);
                                    }, r => {
     
                                        reject(r);
                                    })
                                } else {
     
                                    resolve(result);
                                }
                            } catch (e) {
     
                                reject(e);
                            }
                        },
                        onRejected: function () {
     
                            try {
     
                                //执行成功回调函数
                                let result = onRejected(that.PromiseResult);
                                //判断
                                if (result instanceof Promise) {
     
                                    result.then(v => {
     
                                        resolve(v);
                                    }, r => {
     
                                        reject(r);
                                    })
                                } else {
     
                                    resolve(result);
                                }
                            } catch(e){
     
                                reject(e);
                            }
                        }
                    })
                }
            })
        }
11. 完善then（）方法与优化：
// 自定义函数Promise
function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
              //异步任务成功后执行回调函数
              that.callbacks.forEach(item=>{
     
                  item.onResolved(data);
              })
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
             //异步任务失败后执行回调函数
            that.callbacks.forEach(item=>{
     
                item.onRejected(data);
            })
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function (onResolved, onRejected) {
     
         const that = this;
            return new Promise((resolve, reject) => {
     
                //封装重复的部分
                function callback(type){
     
                    try {
     
                        //将结果值传入
                        let result = type(that.PromiseResult);
                        //判断
                        if (result instanceof Promise) {
     
                            //如果是Promise对象
                            result.then(v => {
     
                                resolve(v);
                            }, r => {
     
                                reject(r);
                            })
                        } else {
     
                            //结果对象状态为【成功】
                            resolve(result);
                        }
                    } catch (e) {
     
                        reject(e);
                    }
                }
                //如果Promise状态为fulfilled回调这个函数
                if (this.PromiseState === 'fulfilled') {
     
                    callback(onResolved);
                }
                //如果Promise状态为rejected回调这个函数
                if (this.PromiseState === 'rejected') {
     
                    callback(onRejected);
                }
                //如果Promise状态为pending,保存回调函数
                if (this.PromiseState === 'pending') {
     
                    this.callbacks.push({
     
                        onResolved: function () {
     
                            callback(onResolved);
                        },
                        onRejected: function () {
     
                            callback(onRejected);
                        }
                    })
                }
            })
        }
12. 实现catch方法与异常穿透：
// 自定义函数Promise
function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
              //异步任务成功后执行回调函数
              that.callbacks.forEach(item=>{
     
                  item.onResolved(data);
              })
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
             //异步任务失败后执行回调函数
            that.callbacks.forEach(item=>{
     
                item.onRejected(data);
            })
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function (onResolved, onRejected) {
     
         const that = this;
         //判断回调参数是否存在
         if(typeof onRejected !== 'function'){
     
             onRejected = reason =>{
     
                 throw reason;
             }
         }
         if(typeof onResolved !== 'function'){
     
             onResolved = value => value;
         }
            return new Promise((resolve, reject) => {
     
                //封装重复的部分
                function callback(type){
     
                    try {
     
                        //将结果值传入
                        let result = type(that.PromiseResult);
                        //判断
                        if (result instanceof Promise) {
     
                            //如果是Promise对象
                            result.then(v => {
     
                                resolve(v);
                            }, r => {
     
                                reject(r);
                            })
                        } else {
     
                            //结果对象状态为【成功】
                            resolve(result);
                        }
                    } catch (e) {
     
                        reject(e);
                    }
                }
                //如果Promise状态为fulfilled回调这个函数
                if (this.PromiseState === 'fulfilled') {
     
                    callback(onResolved);
                }
                //如果Promise状态为rejected回调这个函数
                if (this.PromiseState === 'rejected') {
     
                    callback(onRejected);
                }
                //如果Promise状态为pending,保存回调函数
                if (this.PromiseState === 'pending') {
     
                    this.callbacks.push({
     
                        onResolved: function () {
     
                            callback(onResolved);
                        },
                        onRejected: function () {
     
                            callback(onRejected);
                        }
                    })
                }
            })
        }
//添加catch 方法
     Promise.prototype.catch = function(onRejected){
     
         return this.then(undefined,onRejected);
     }

注：typeof 操作符返回一个字符串，表示未经计算的操作数的类型。

13. 封装Promise.resolve（）方法：
// 自定义函数Promise
function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
              //异步任务成功后执行回调函数
              that.callbacks.forEach(item=>{
     
                  item.onResolved(data);
              })
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
             //异步任务失败后执行回调函数
            that.callbacks.forEach(item=>{
     
                item.onRejected(data);
            })
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function (onResolved, onRejected) {
     
         const that = this;
         //判断回调参数是否存在
         if(typeof onRejected !== 'function'){
     
             onRejected = reason =>{
     
                 throw reason;
             }
         }
         if(typeof onResolved !== 'function'){
     
             onResolved = value => value;
         }
            return new Promise((resolve, reject) => {
     
                //封装重复的部分
                function callback(type){
     
                    try {
     
                        //将结果值传入
                        let result = type(that.PromiseResult);
                        //判断
                        if (result instanceof Promise) {
     
                            //如果是Promise对象
                            result.then(v => {
     
                                resolve(v);
                            }, r => {
     
                                reject(r);
                            })
                        } else {
     
                            //结果对象状态为【成功】
                            resolve(result);
                        }
                    } catch (e) {
     
                        reject(e);
                    }
                }
                //如果Promise状态为fulfilled回调这个函数
                if (this.PromiseState === 'fulfilled') {
     
                    callback(onResolved);
                }
                //如果Promise状态为rejected回调这个函数
                if (this.PromiseState === 'rejected') {
     
                    callback(onRejected);
                }
                //如果Promise状态为pending,保存回调函数
                if (this.PromiseState === 'pending') {
     
                    this.callbacks.push({
     
                        onResolved: function () {
     
                            callback(onResolved);
                        },
                        onRejected: function () {
     
                            callback(onRejected);
                        }
                    })
                }
            })
        }
//添加catch 方法
     Promise.prototype.catch = function(onRejected){
     
         return this.then(undefined,onRejected);
     }
//添加resolve方法
Promise.resolve = function(value){
     
    //返回promise对象
    return new Promise((resolve,reject) =>{
     
       if(value instanceof Promise){
     
            value.then(v=>{
     
               resolve(v);
            },r=>{
     
               reject(r);
            })
       }else{
     
            resolve(value);
       }
    })
}

注：instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
实践一下：

 let p = Promise.resolve(new Promise((resolve,reject)=>{
     
          reject('_(´ཀ`」 ∠)_');
      }));
      console.log(p);

结果：
前端Promise总结笔记_第9张图片

14. 封装Promise.reject方法：

无论传入啥只返回一个失败的promise对象。

// 自定义函数Promise
function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
              //异步任务成功后执行回调函数
              that.callbacks.forEach(item=>{
     
                  item.onResolved(data);
              })
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
             //异步任务失败后执行回调函数
            that.callbacks.forEach(item=>{
     
                item.onRejected(data);
            })
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function (onResolved, onRejected) {
     
         const that = this;
         //判断回调参数是否存在
         if(typeof onRejected !== 'function'){
     
             onRejected = reason =>{
     
                 throw reason;
             }
         }
         if(typeof onResolved !== 'function'){
     
             onResolved = value => value;
         }
            return new Promise((resolve, reject) => {
     
                //封装重复的部分
                function callback(type){
     
                    try {
     
                        //将结果值传入
                        let result = type(that.PromiseResult);
                        //判断
                        if (result instanceof Promise) {
     
                            //如果是Promise对象
                            result.then(v => {
     
                                resolve(v);
                            }, r => {
     
                                reject(r);
                            })
                        } else {
     
                            //结果对象状态为【成功】
                            resolve(result);
                        }
                    } catch (e) {
     
                        reject(e);
                    }
                }
                //如果Promise状态为fulfilled回调这个函数
                if (this.PromiseState === 'fulfilled') {
     
                    callback(onResolved);
                }
                //如果Promise状态为rejected回调这个函数
                if (this.PromiseState === 'rejected') {
     
                    callback(onRejected);
                }
                //如果Promise状态为pending,保存回调函数
                if (this.PromiseState === 'pending') {
     
                    this.callbacks.push({
     
                        onResolved: function () {
     
                            callback(onResolved);
                        },
                        onRejected: function () {
     
                            callback(onRejected);
                        }
                    })
                }
            })
        }
//添加catch 方法
     Promise.prototype.catch = function(onRejected){
     
         return this.then(undefined,onRejected);
     }
//添加resolve方法
Promise.resolve = function(value){
     
    //返回promise对象
    return new Promise((resolve,reject) =>{
     
       if(value instanceof Promise){
     
            value.then(v=>{
     
               resolve(v);
            },r=>{
     
               reject(r);
            })
       }else{
     
            resolve(value);
       }
    })
}
//添加reject方法
Promise.reject = function(reason){
     
    return new Promise((resolve,reject)=>{
     
        reject(reason);
    });
}
15. 封装Promise.all方法：

返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败。失败了返回那个失败值。

// 自定义函数Promise
function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
     
            //判断状态是否修改过
            if(that.PromiseState !== 'pending') return;
             //改变状态属性
             that.PromiseState = 'fulfilled';  // 或者 resolve 
             //改变结果值属性
             that.PromiseResult =data;
              //异步任务成功后执行回调函数
              that.callbacks.forEach(item=>{
     
                  item.onResolved(data);
              })
          }
          //自定义reject函数
          function reject(data){
     
             //判断状态是否修改过,改过就直接返回
            if(that.PromiseState !== 'pending') return;
              //改变状态属性
             that.PromiseState = 'rejected';  
            //改变结果值属性
             that.PromiseResult =data;
             //异步任务失败后执行回调函数
            that.callbacks.forEach(item=>{
     
                item.onRejected(data);
            })
          }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function (onResolved, onRejected) {
     
         const that = this;
         //判断回调参数是否存在
         if(typeof onRejected !== 'function'){
     
             onRejected = reason =>{
     
                 throw reason;
             }
         }
         if(typeof onResolved !== 'function'){
     
             onResolved = value => value;
         }
            return new Promise((resolve, reject) => {
     
                //封装重复的部分
                function callback(type){
     
                    try {
     
                        //将结果值传入
                        let result = type(that.PromiseResult);
                        //判断
                        if (result instanceof Promise) {
     
                            //如果是Promise对象
                            result.then(v => {
     
                                resolve(v);
                            }, r => {
     
                                reject(r);
                            })
                        } else {
     
                            //结果对象状态为【成功】
                            resolve(result);
                        }
                    } catch (e) {
     
                        reject(e);
                    }
                }
                //如果Promise状态为fulfilled回调这个函数
                if (this.PromiseState === 'fulfilled') {
     
                    callback(onResolved);
                }
                //如果Promise状态为rejected回调这个函数
                if (this.PromiseState === 'rejected') {
     
                    callback(onRejected);
                }
                //如果Promise状态为pending,保存回调函数
                if (this.PromiseState === 'pending') {
     
                    this.callbacks.push({
     
                        onResolved: function () {
     
                            callback(onResolved);
                        },
                        onRejected: function () {
     
                            callback(onRejected);
                        }
                    })
                }
            })
        }
//添加catch 方法
     Promise.prototype.catch = function(onRejected){
     
         return this.then(undefined,onRejected);
     }
//添加resolve方法
Promise.resolve = function(value){
     
    //返回promise对象
    return new Promise((resolve,reject) =>{
     
       if(value instanceof Promise){
     
            value.then(v=>{
     
               resolve(v);
            },r=>{
     
               reject(r);
            })
       }else{
     
            resolve(value);
       }
    })
}
//添加reject方法
Promise.reject = function(reason){
     
    return new Promise((resolve,reject)=>{
     
        reject(reason);
    });
}
//添加all方法
Promise.all = function(promises){
     
    return new Promise((resolve,reject) => {
     
        //添加变量
        let count = 0;
        // 存放成功结果数组
        let arr =[];
        //遍历全部
        for (let i = 0; i < promises.length; i++) {
     
            promises[i].then(v => {
     
                //能进到证明其为成功
                count++;
                //保存成功结果
                arr[i]=v;
                //如果全部成功
                if (count === promises.length) {
     
                    //状态为成功
                    resolve(arr);
                }
            }, r => {
     
                 //能进到证明其为失败
                reject(r);
            });
        }
    });
}

试一下：

 let p1 = new Promise((resolve,reject)=>{
     
          resolve('_(´ཀ`」 ∠)_');
      });
      let p2 = Promise.resolve('ok');
      let p3 = Promise.resolve('yes');
      let res = Promise.all([p1,p2,p3]);
      console.log(res);

结果：
前端Promise总结笔记_第10张图片

16. 封装Promise.race方法：

返回一个新的promise,第一个完成的promise的结果状态改变的就是最终的结果状态。
上面重复的代码就不写上了：

//添加race方法
Promise.race = function(promises){
     
    return new Promise((resolve,reject) => {
     
        //遍历全部
        for (let i = 0; i < promises.length; i++) {
     
            promises[i].then(v => {
     
                    //能进到证明其为成功
                    //状态为成功
                    resolve(v);
                }, r => {
     
                 //能进到证明其为失败
                reject(r);
            })
         }
      });
    }

试一下：

 let p1 = new Promise((resolve,reject)=>{
     
          setTimeout(()=>{
     
            resolve('_(´ཀ`」 ∠)_');
          })
         
      });
      let p2 = Promise.resolve('ok');
      let p3 = Promise.resolve('yes');
      let res = Promise.race([p1,p2,p3]);
      console.log(res);

没毛病：
前端Promise总结笔记_第11张图片

17.回调函数异步执行：

上面回调函数还是同步执行的，要让 then（）回调函数异步执行。
添加定时器模仿异步操作：

// 自定义函数Promise
function Promise(executor){
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data) {
     
        //判断状态是否修改过
        if (that.PromiseState !== 'pending') return;
        //改变状态属性
        that.PromiseState = 'fulfilled';  // 或者 resolve 
        //改变结果值属性
        that.PromiseResult = data;
        //异步任务成功后执行回调函数
        setTimeout(() => {
     
            that.callbacks.forEach(item => {
     
                item.onResolved(data);
            })
        });
    }
    //自定义reject函数
    function reject(data) {
     
        //判断状态是否修改过,改过就直接返回
        if (that.PromiseState !== 'pending') return;
        //改变状态属性
        that.PromiseState = 'rejected';
        //改变结果值属性
        that.PromiseResult = data;
        //异步任务失败后执行回调函数
        setTimeout(() => {
     
            that.callbacks.forEach(item => {
     
                item.onRejected(data);
            })
        });
    }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
          
     }
     // 添加then方法
     Promise.prototype.then = function (onResolved, onRejected) {
     
         const that = this;
         //判断回调参数是否存在
         if(typeof onRejected !== 'function'){
     
             onRejected = reason =>{
     
                 throw reason;
             }
         }
         if(typeof onResolved !== 'function'){
     
             onResolved = value => value;
         }
            return new Promise((resolve, reject) => {
     
                //封装重复的部分
                function callback(type){
     
                    try {
     
                        //将结果值传入
                        let result = type(that.PromiseResult);
                        //判断
                        if (result instanceof Promise) {
     
                            //如果是Promise对象
                            result.then(v => {
     
                                resolve(v);
                            }, r => {
     
                                reject(r);
                            })
                        } else {
     
                            //结果对象状态为【成功】
                            resolve(result);
                        }
                    } catch (e) {
     
                        reject(e);
                    }
                }
                //如果Promise状态为fulfilled回调这个函数
                if (this.PromiseState === 'fulfilled') {
     
                    setTimeout(()=>{
     
                        callback(onResolved);
                    });
                }
                //如果Promise状态为rejected回调这个函数
                if (this.PromiseState === 'rejected') {
     
                    setTimeout(()=>{
     
                        callback(onRejected);
                    });
                }
                //如果Promise状态为pending,保存回调函数
                if (this.PromiseState === 'pending') {
     
                    this.callbacks.push({
     
                        onResolved: function () {
     
                            callback(onResolved);
                        },
                        onRejected: function () {
     
                            callback(onRejected);
                        }
                    })
                }
            })
        }
//添加catch 方法
     Promise.prototype.catch = function(onRejected){
     
         return this.then(undefined,onRejected);
     }
//添加resolve方法
Promise.resolve = function(value){
     
    //返回promise对象
    return new Promise((resolve,reject) =>{
     
       if(value instanceof Promise){
     
            value.then(v=>{
     
               resolve(v);
            },r=>{
     
               reject(r);
            })
       }else{
     
            resolve(value);
       }
    })
}
//添加reject方法
Promise.reject = function(reason){
     
    return new Promise((resolve,reject)=>{
     
        reject(reason);
    });
}
//添加all方法
Promise.all = function(promises){
     
    return new Promise((resolve,reject) => {
     
        //添加变量
        let count = 0;
        // 存放成功结果数组
        let arr =[];
        //遍历全部
        for (let i = 0; i < promises.length; i++) {
     
            promises[i].then(v => {
     
                //能进到证明其为成功
                count++;
                //保存成功结果
                arr[i]=v;
                //如果全部成功
                if (count === promises.length) {
     
                    //状态为成功
                    resolve(arr);
                }
            }, r => {
     
                 //能进到证明其为失败
                reject(r);
            });
        }
    });
}
//添加race方法
Promise.race = function(promises){
     
    return new Promise((resolve,reject) => {
     
        //遍历全部
        for (let i = 0; i < promises.length; i++) {
     
            promises[i].then(v => {
     
                    //能进到证明其为成功
                    //状态为成功
                    resolve(v);
                }, r => {
     
                 //能进到证明其为失败
                reject(r);
            })
         }
      });
    }
18.class版本封装：

最终封装：

class Promise{
     
    //构造方法
    constructor(executor) {
     
          //添加状态属性与结果值属性
          this.PromiseState = 'pending';
          this.PromiseResult = null;
          // 定义callback属性，保存pending状态的回调函数
          this.callbacks = [];
           //保存实例对象的this值
           const that = this;
          //自定义resolve函数,名字不一定用resolve
          function resolve(data) {
     
        //判断状态是否修改过
        if (that.PromiseState !== 'pending') return;
        //改变状态属性
        that.PromiseState = 'fulfilled';  // 或者 resolve 
        //改变结果值属性
        that.PromiseResult = data;
        //异步任务成功后执行回调函数
        setTimeout(() => {
     
            that.callbacks.forEach(item => {
     
                item.onResolved(data);
            })
        });
    }
    //自定义reject函数
    function reject(data) {
     
        //判断状态是否修改过,改过就直接返回
        if (that.PromiseState !== 'pending') return;
        //改变状态属性
        that.PromiseState = 'rejected';
        //改变结果值属性
        that.PromiseResult = data;
        //异步任务失败后执行回调函数
        setTimeout(() => {
     
            that.callbacks.forEach(item => {
     
                item.onRejected(data);
            })
        });
    }

          try{
     
          //同步调用【执行器函数】
          executor(resolve,reject);
          }catch(e){
     
              //更改Promise对象为失败
              reject(e);
          }
    }
    //then方法封装
    then(onResolved,onRejected){
     
        const that = this;
         //判断回调参数是否存在
         if(typeof onRejected !== 'function'){
     
             onRejected = reason =>{
     
                 throw reason;
             }
         }
         if(typeof onResolved !== 'function'){
     
             onResolved = value => value;
         }
            return new Promise((resolve, reject) => {
     
                //封装重复的部分
                function callback(type){
     
                    try {
     
                        //将结果值传入
                        let result = type(that.PromiseResult);
                        //判断
                        if (result instanceof Promise) {
     
                            //如果是Promise对象
                            result.then(v => {
     
                                resolve(v);
                            }, r => {
     
                                reject(r);
                            })
                        } else {
     
                            //结果对象状态为【成功】
                            resolve(result);
                        }
                    } catch (e) {
     
                        reject(e);
                    }
                }
                //如果Promise状态为fulfilled回调这个函数
                if (this.PromiseState === 'fulfilled') {
     
                    setTimeout(()=>{
     
                        callback(onResolved);
                    });
                }
                //如果Promise状态为rejected回调这个函数
                if (this.PromiseState === 'rejected') {
     
                    setTimeout(()=>{
     
                        callback(onRejected);
                    });
                }
                //如果Promise状态为pending,保存回调函数
                if (this.PromiseState === 'pending') {
     
                    this.callbacks.push({
     
                        onResolved: function () {
     
                            callback(onResolved);
                        },
                        onRejected: function () {
     
                            callback(onRejected);
                        }
                    })
                }
            })
    }
    //catch 方法
    catch(onRejected){
     
         return this.then(undefined,onRejected);
     }
    //resolve方法
    static resolve(value){
     
    //返回promise对象
    return new Promise((resolve,reject) =>{
     
       if(value instanceof Promise){
     
            value.then(v=>{
     
               resolve(v);
            },r=>{
     
               reject(r);
            })
       }else{
     
            resolve(value);
       }
    })
}
    //reject方法
    static reject(reason){
     
    return new Promise((resolve,reject)=>{
     
        reject(reason);
    });
}
    //all方法
    static all(promises) {
     
        return new Promise((resolve, reject) => {
     
            //添加变量
            let count = 0;
            // 存放成功结果数组
            let arr = [];
            //遍历全部
            for (let i = 0; i < promises.length; i++) {
     
                promises[i].then(v => {
     
                    //能进到证明其为成功
                    count++;
                    //保存成功结果
                    arr[i] = v;
                    //如果全部成功
                    if (count === promises.length) {
     
                        //状态为成功
                        resolve(arr);
                    }
                }, r => {
     
                    //能进到证明其为失败
                    reject(r);
                });
            }
        });
    }
    //race方法
    static race(promises) {
     
        return new Promise((resolve, reject) => {
     
            //遍历全部
            for (let i = 0; i < promises.length; i++) {
     
                promises[i].then(v => {
     
                    //能进到证明其为成功
                    //状态为成功
                    resolve(v);
                }, r => {
     
                    //能进到证明其为失败
                    reject(r);
                })
            }
        });
    }

}

十一：async函数：

MDN文档

1.函数的返回值为promise对象。
2.promise对象的结果由async函数执行的返回值决定。
3.其实跟 then（）方法返回结果是一样一样的。

1.返回一个非Promise对象，返回值是resolve。
 async function main(){
     
             return '123';
          }
          let res = main();
          console.log(res);

前端Promise总结笔记_第12张图片

2.如果返回是一个Promise对象，由返回结果决定：

如：

 async function main(){
     
             return new Promise((resolve,reject)=>{
     
                 reject('NO');
             });
          }
          let res = main();
          console.log(res);

前端Promise总结笔记_第13张图片

3.抛出异常也是失败：
 async function main(){
     
             return new Promise((resolve,reject)=>{
     
                 reject('NO');
             });
          }
          let res = main();
          console.log(res);

前端Promise总结笔记_第14张图片

十二.await表达式：

MDN文档

1.await右侧的表达式一般为promise对象，但也可以是其它的值。
2.如果表达式是promise对象,await返回的是promise成功的值。
3.如果表达式是其它值,直接将此值作为await的返回值。

注意：

1.await 必须写在async函数中,但async 函数中可以没有await 。
2.如果await的promise失败了,就会抛出异常,需要通过try…catch捕获处理。

1.右侧为promise对象：
 async function works(){
     
             let p = new Promise((resolve,reject)=>{
     
                 resolve('oh yes')
             })
             let res = await p;
             console.log(res);
         }
         works();

结果：
oh yes

2.右侧为其它值：
  async function works(){
     
             let p = new Promise((resolve,reject)=>{
     
                 resolve('oh yes')
             })
           //  let res = await p;
           let res = await 100;
             console.log(res);
         }
         works();

结果：
100

3.如果promise是失败状态：
 async function works(){
     
             let p = new Promise((resolve,reject)=>{
     
                // resolve('oh yes')
                reject('err');
             })          
            try{
     
                let res = await p;
            }catch(e){
     
                console.log(e);
            }
         }
         works();

前端Promise总结笔记_第15张图片

十三.async与await结合发生ajax请求：

效果： 点击按钮获取一句名言。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <button id="btn">获取一句名言button>
    <script>
        function sendAJAX(url) {
      
         return new Promise((resolve, reject) => {
      
                //创建对象
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                //初始化
                xhr.open('GET', url);
                //发送
                xhr.send();
                //处理响应结果
                xhr.onreadystatechange = function () {
      
                    if (xhr.readyState === 4) {
      
                        if (xhr.status >= 200 && xhr.status < 300) {
      
                            //输出响应体
                            resolve(xhr.response);
                        } else {
      
                            //输出响应状态码
                            reject(xhr.status);
                        }
                    }
                }
            });
     }
         
        var btn = document.querySelector("#btn");
        btn.addEventListener('click',async function(){
      
             let word = await sendAJAX("http://poetry.apiopen.top/sentences");
              console.log(word);
        })
    script>
body>
html>

前端Promise总结笔记_第16张图片

十四.总结：

我只想说…
前端Promise总结笔记_第17张图片

你可能感兴趣的:(前端大全,笔记大全,Vue,的使用,Promise,ajax,前端,js,笔记)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • C#中使用split分割字符串 互联网打工人no1 c#
    1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
  • git常用命令笔记 咩酱-小羊 git笔记
    ###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
  • Python中os.environ基本介绍及使用方法 鹤冲天Pro #Pythonpython服务器开发语言
    文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
  • linux中sdl的使用教程,sdl使用入门 Melissa Corvinus linux中sdl的使用教程
    本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一
  • 509. 斐波那契数(每日一题) lzyprime
    lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
  • 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
    不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
  • 直返最高等级与直返APP：无需邀请码的返利新体验 古楼
    随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java算法华为javascript
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 2020-04-12每天三百字之连接与替代 冷眼看潮
    不知道是不是好为人师，有时候还真想和别人分享一下我对某些现象的看法或者解释。人类社会不断发展进步的过程，就是不断连接与替代的过程。人类发现了火并应用火以后，告别了茹毛饮血的野兽般的原始生活（火烧、烹饪替代了生食）人类用石器代替了完全手工，工具的使用使人类进步一大步。类似这样的替代还有很多，随着科技的发展，有更多的原始的事物被替代，代之以更高效、更先进的技术。在近现代，汽车替代了马车，高速公路和铁路
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 数组去重 好奇的猫猫猫
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • Day17笔记-高阶函数 ~在杰难逃~ Python笔记python开发语言pycharm数据分析
    高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • 【JS】执行时长(100分) |思路参考+代码解析（C++） l939035548 JS算法数据结构c++
    题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
  • pyecharts——绘制柱形图折线图 2224070247 信息可视化pythonjava数据可视化
    一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 数据仓库——维度表一致性 墨染丶eye 背诵数据仓库
    数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
  • Python爬虫解析工具之xpath使用详解 eqa11 python爬虫开发语言
    文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
  • docker igotyback eureka云原生
    Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
  • 【Git】常见命令(仅笔记) 好想有猫猫 GitLinux学习笔记git笔记elasticsearchlinuxc++
    文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
  • java封装继承多态等 麦田的设计者 javaeclipsejvmcencapsulatopn
           最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。     1、final关键字       译为：最终的        &
  • F5与集群的区别 bijian1013 weblogic集群F5
            http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。         F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似
  • LeetCode[Math] - #7 Reverse Integer Cwind java题解MathLeetCodeAlgorithm
    原题链接：#7 Reverse Integer   要求： 按位反转输入的数字 例1： 输入 x = 123, 返回 321 例2： 输入 x = -123, 返回 -321   难度：简单   分析： 对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但
  • BufferedOutputStream 周凡杨
         首先说一下这个大批量，是指有上千万的数据量。      例子：      有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！      select t.msisd
  • linux下模拟按键输入和鼠标 被触发 linux
    查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键 模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in
  • ContentProvider初体验 肆无忌惮_ ContentProvider
    ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。 在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。 如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte
  • 关于Spring MVC项目（maven）中通过fileupload上传文件 843977358 mybatisspring mvc修改头像上传文件upload
    Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。   1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） <!-- 文件上传 start by zhangyd-c --&g
  • 使用svnkit api，纯java操作svn，实现svn提交，更新等操作 aigo svnkit
     原文：http://blog.csdn.net/hardwin/article/details/7963318   import java.io.File; import org.apache.log4j.Logger; import org.tmatesoft.svn.core.SVNCommitInfo; import org.tmateso
  • 对比浏览器，casperjs，httpclient的Header信息 alleni123 爬虫crawlerheader
    @Override protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String type=req.getParameter("type"); Enumeration es=re
  • java.io操作 DataInputStream和DataOutputStream基本数据流 百合不是茶 java流
    1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象  先将类实例化  后面的文章将详细写到     2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。
  • 车辆保险理赔案例 bijian1013 车险
    理赔案例： 一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。 赔付建议和方案： 客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”； 如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业
  • 学习Spring必学的Java基础知识(5)—注解 bijian1013 javaspring
            文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。           有必要对
  • 【Struts2一】Struts2 Hello World bit1129 Hello world
    Struts2 Hello World应用的基本步骤 创建Struts2的Hello World应用，包括如下几步： 1.配置web.xml 2.创建Action 3.创建struts.xml，配置Action 4.启动web server，通过浏览器访问   配置web.xml <?xml version="1.0" encoding="
  • 【Avro二】Avro RPC框架 bit1129 rpc
    1. Avro RPC简介 1.1. RPC RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包 从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R
  • lua　set get cookie ronin47 lua cookie
    lua: local access_token = ngx.var.cookie_SGAccessToken if access_token then ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000" end
  • java-打印不大于N的质数 bylijinnan java
    public class PrimeNumber { /** * 寻找不大于N的质数 */ public static void main(String[] args) { int n=100; PrimeNumber pn=new PrimeNumber(); pn.printPrimeNumber(n); System.out.print
  • Spring源码学习-PropertyPlaceholderHelper bylijinnan javaspring
    今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复： 详见： http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug
  • [逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么? comsci 拓扑
       如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢?    是否可以形成一种新的模糊语言识别和处理模型呢?  大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成
  • ITEYE 都换百度推广了 cuisuqiang GoogleAdSense百度推广广告外快
    以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。   为什么个人博客设置里面还是Google AdSense呢？   都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。   什么时候能从ITEYE上来点外快，哪怕少点
  • 新浪微博技术架构分析 dalan_123 新浪微博架构
    新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第
  • 玩转ARP攻击 dcj3sjt126com r
    我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。 网上关于ARP的资料已经很多了，就不用我都说了。 用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。 以下讨论的机子有 一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98
  • PHP编码规范 dcj3sjt126com 编码规范
    一、文件格式 1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例
  • linux 脱机管理（nohup） eksliang linux nohupnohup
    脱机管理 nohup 转载请出自出处：http://eksliang.iteye.com/blog/2166699 nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 nohup [命令与参数] --在终端机前台工作 nohup [命令与参数] & --在终端机后台工作   但是这个命令需要注意的是，nohup并不支持bash的内置命令，所
  • BusinessObjects Enterprise Java SDK greemranqq javaBOSAPCrystal Reports
    最近项目用到oracle_ADF  从SAP/BO 上调用 水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手 提供更多的便利。   首先，我是尝试用JAVA JSP 去访问的。   官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja
  • 系统负载剧变下的管控策略 iamzhongyong 高并发
    假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 1、水平扩展 这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 2、系统分组 假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组
  • BitTorrent DHT 协议中文翻译 justjavac bit
    前言 做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070
  • Ubuntu下Java环境的搭建 macroli java工作ubuntu
    配置命令： 　　$sudo apt-get install ubuntu-restricted-extras 　　再运行如下命令： 　　$sudo apt-get install sun-java6-jdk 　　待安装完毕后选择默认Java. 　　$sudo update- alternatives --config java 　　安装过程提示选择，输入“2”即可，然后按回车键确定。
  • js字符串转日期（兼容IE所有版本） qiaolevip TODateStringIE
    /** * 字符串转时间（yyyy-MM-dd HH:mm:ss） * result （分钟） */ stringToDate : function(fDate){ var fullDate = fDate.split(" ")[0].split("-"); var fullTime = fDate.split("
  • 【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析 superlxw1234 sql数据挖掘关联规则
    关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。 关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。 例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%] 支持度3%：意味3%顾客同时购买牛奶和面包。 置信度40%：意味购买牛奶的顾客40%也购买面包。 规则的支持度和置信度是两个规则兴
  • Spring 5.0 的系统需求，期待你的反馈 wiselyman spring
                   Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。          Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。  
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他