ES6系列---【promise对象】

promise对象

​ promise是ES6提供的异步编程解决方案，比传统的解决方案（回调函数）更合理更强大。使用promise对象可以将异步操作以同步的形式的表现出来，避免了层层嵌套的回调函数。此外，promise对象还提供了统一的接口，使得控制异步操作更容易。

​ promise(承诺)：

promise对象有以下特点：

​ 1） promise对象有三种状态：pending( 程序进行中)、fulfilled( 已成功的)、rejected（失败的）。只有异步操作的结果可以决定是哪一种状态，任何其他操作都无法改变这个状态。

​ 2）一旦状态完成，就不会再改变，任何时候去读取promise对象，都是这个状态。

  // 创建promise对象
  let p1 = new Promise(function(resolve,reject){
    // 函数内写异步操作的代码
    setTimeout(function(){
      reject("失败"); //reject发送失败消息
      resolve("成功"); // resolve发送成功消息
    },2000)
  });

  console.log( p1 );

promies与ajax结合的基本用法

  let p1 = new Promise((resolve,reject)=>{
    // 异步操作的代码写这里
    $.ajax({
      type: "get",
      url: "http://cj.shenzhou888.com.cn/hb_vote/api.php?action=area&id=0",
      data: null,
      dataType: "json",
      success(response) {
        resolve(response); //resolve()将成功的结果发送出去
      },
      error(err){
        reject(err); //reject()将失败的消息发送出去
      }
    });
  })

  // promise实例对象有then() 处理成功
  // promise实例对象有catch() 处理失败
  p1.then(function(data){
    console.log( data );
    // 渲染页面的代码
  }).catch(function(err){
    console.log( err );
    // 给用户错误消息的代码写这
  })

promise的链式写法

​ 在需要嵌套发送ajax时候，在每次成功处理函数的最后一行 return一个新的promise实例对象，就可以连续不断的使用 .then().then()的写法，避免了层层嵌套的写法。

  // 第一次获取省份
  sendAjax({ url: "http://cj.shenzhou888.com.cn/hb_vote/api.php?action=area&id=0" })
  .then((data) => {
    // 省的数据
    console.log(data);
    return sendAjax({ url: "http://cj.shenzhou888.com.cn/hb_vote/api.php?action=area&id=12" })
  })
  .then((data)=>{
    // 市的数据
    console.log( data );
    return sendAjax({url:"http://cj.shenzhou888.com.cn/hb_vote/api.php?action=areaxxx&id=179"})
  })
  .then((data)=>{
    // 区县的数据
    console.log( data );
  })
  .catch((err)=>{
    console.log(err);
  })

.catch() 可以放到最后，即可捕获上面所有的异步操作过程中可能产生的错误。

Promise.all()

​ 当需要同时发送多个ajax的时候（不是嵌套），all（）会等待所有的ajax请求成功以后再执行下一步操作。（等最慢的）

​ 语法：

Promise.all([
  sendAjax({url:"http://cj.shenzhou888.com.cn/hb_vote/api.php?action=area&id=12"}),
  sendAjax({url:"http://cj.shenzhou888.com.cn/hb_vote/api.php?action=area&id=2"}),
  sendAjax({url:"http://cj.shenzhou888.com.cn/hb_vote/api.php?action=area&id=13"})
]).then((data)=>{
	// 将三次成功后返回的数据合并到一个数组中
  console.log( data );
})