es6之promise简单理解及使用

Posted 2020-12-19

promise

1. promise是解决异步的一种方案，也就是让promise帮我们去处理异步，最终promise会返回异步处理的结果。
2. 有了promise之后，让异步处理更加灵活，还能够解决之前的回调地狱的问题。

• promise的使用

• 我们需要用promise帮我们处理异步

  var a=new Promise(function(resolve.reject){
      // 在这里来进行真正的异步处理
       setTimeout(function(){
          console.log(‘hello promise‘)
        }, 100);
  }

• promise在处理异步的时候，会成功或者失败，成功调用resolve，失败调用reject

  var p = new Promise(function(resolve, reject){
        // 第一个形参是成功的回调 异步成功 resolve
        // 第一个形参是失败的回调 异步失败 reject
        // 这里用于实现异步任务
        setTimeout(function(){
          var flag = true;
          if(flag) {
            // 正常情况
            resolve(‘hello promise‘);
          }else{
            // 异常情况
            reject(‘error ‘);
          }
        }, 200);
      });

• 获取到异步的结果

  p.then(function(data){
      //第一个函数是成功时调用
      console.log(data)
  },function(info){
      //这个函数是失败时调用
      console.log(info)
  });

• promise解决回调地狱的问题
  在promise实例的then方法内部 如果return了一个新的Promise实例对象
下一个.then的成功回调函数，是属于新的promise处理异步的成功的回调

  function queryData(url){
      var p=new Promise((resolve.reject)=>{
              var xhr=new XMLHttpRequest();
              xhr.open(‘get‘,url);
              xhr.send(null);
              xhr.onlaod=function(){
                  if(xhr.status==200){
                      resolve(xhr.respomseText)
                  }else{
                      reject(‘服务器出错‘)
                  }   
              }
      })
  }
  queryData(‘http://localhost:3000/data‘).then(function(res){
        console.log(res)
        // queryData 返回的是 Promise实例对象
        return queryData(‘http://localhost:3000/data1‘)
      }).then(function(res) {
        console.log(res)
        return queryData(‘http://localhost:3000/data2‘)
      }).then(function(res) {
        console.log(res)
      })

• promise的实例方法
  通过实例对象来调用的方法或属性，我们叫做：实例方法或者实例属性
1. then: 第一个回调函数是成功的回调，第二个是失败的回调
2. catch：专门用来处理失败的
3. finally：不管成功还是失败都会执行

      function foo() {
            return new Promise(function (resolve, reject) {
              setTimeout(function () {
                resolve(123);
                // reject(‘error‘);
              }, 100);
            })
          }
  
        foo()
        .then(function(data){
          console.log(data)
        })
        .catch(function(data){
          console.log(data)
        })
        .finally(function(){
          console.log(‘finished‘)
        });

  通过构造函数来调用的方发或属性，我们叫做：静态方法或者静态属性
1. all：该方法接收一个数组，数组的每一项都是处理异步的promise实例对象，数组每一项的异步都处理完成之后，all的then的成功的回调才会执行
2. race：使用的方式和all一摸一样，区别就是race的then的成功回调，只要有一个异步成功，then就调用

  function queryData(url) {
        return new Promise(function (resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) return;
            if (xhr.readyState == 4 && xhr.status == 200) {
              // 处理正常的情况
              resolve(xhr.responseText);
            } else {
              // 处理异常情况
              reject(‘服务器错误‘);
            }
          };
          xhr.open(‘get‘, url);
          xhr.send(null);
        });
      }
  
      var p1 = queryData(‘http://localhost:3000/a1‘);
      var p2 = queryData(‘http://localhost:3000/a2‘);
      var p3 = queryData(‘http://localhost:3000/a3‘);
      // 静态方法 实例方法
      // 通过构造函数调用的方法 叫做静态方法
      // 通过实例调用的叫做实例方法
  
      //1. Promise.all() 并发处理多个异步执行任务 ，所有任务都执行完才能得到结果
      // 这里会延迟3秒才会出结果
      Promise.all([p1, p2, p3]).then(function (result) {
        console.log(result)
      })
      //2. Promise.race 并发处理多个异步任务 只要有一个任务完成就能得到结果
      // 得到最先返回的结果
      Promise.race([p1, p2, p3]).then(function (result) {
        console.log(result)
      })