Promise

1.异步
1.1JavaScript的执行环境是「单线程」
1.2.所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
1.3.异步模式可以一起执行多个任务
1.4.JS中常见的异步调用
定时任何
ajax
事件函数

2.promise
主要解决异步深层嵌套的问题
promise 提供了简洁的API 使得异步操作更加容易

3.回调地狱的问题

  $.ajax({
      url: 'http://localhost:3000/data',
      success: function(data) {
        console.log(data)
        $.ajax({
          url: 'http://localhost:3000/data1',
          success: function(data) {
            console.log(data)
            $.ajax({
              url: 'http://localhost:3000/data2',
              success: function(data) {
                console.log(data)
              }
            });
          }
        });
      }
    });

4.Promise基本使用

<script type="text/javascript">
    // console.log(typeof Promise)
    // console.dir(Promise);

    var p = new Promise(function(resolve, reject){
      // 这里用于实现异步任务
      setTimeout(function(){
        var flag = false;
        if(flag) {
          // 正常情况
          resolve('hello');
        }else{
          // 异常情况
          reject('出错了');
        }
      }, 100);
    });
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });

5.基于Promise发送Ajax请求

function queryData(url) {
  var p = 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);
  });
  return p;
}

// 发送多个ajax请求并且保证顺序
queryData("http://localhost:3000/data")
  .then(function (data) {
    console.log(data);
    return queryData("http://localhost:3000/data1");
  })
  .then(function (data) {
    console.log(data);
    return queryData("http://localhost:3000/data2");
  })
  .then(function (data) {
    console.log(data);
  });

6.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);
  });
}
queryData("http://localhost:3000/data")
  .then(function (data) {
    return queryData("http://localhost:3000/data1");
  })
  .then(function (data) {
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        resolve(123);
      }, 1000);
    });
  })
  .then(function (data) {
    return "hello";
  })
  .then(function (data) {
    console.log(data);
  });

7.Promise常用API-实例方法

    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");
	  });

    // 两种写法是等效的
    foo()
      .then(function(data){
        console.log(data)
      },function(data){
        console.log(data)
      })
      .finally(function(){
        console.log('finished')
      });

8.Promise常用API-对象方法

 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');
      // Promise.all([p1,p2,p3]).then(function(result){
      //   console.log(result)
      // })
      Promise.race([p1,p2,p3]).then(function(result){
        console.log(result)
      })