promise原理及使用方法

Promise 的含义

所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。 resolve 其实就是 返回异步操作的数据

/*
* resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），
*     在异步操作成功时调用，并将异步操作的结果，作为参数传递出去； 
* reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，
*    作为参数传递出去。
*/
// promise 结构
new Promise((resolve, reject)=>{
    $.ajax({
        url : 'http://happymmall.com/user/get_user_info.do',
        type: 'post',
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
}).then((res)=>{
    console.log('success:', res);
},(err) => {
    console.log('error:', err);
});

链式promise

var promiseFn1 = new Promise((resolve, reject)=>{
    $.ajax({
        url : 'http://happymmall.com/user/get_user_info.do',
        type: 'post',
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
});

var promiseFn2 = new Promise((resolve, reject)=>{
    $.ajax({
        url : 'http://happymmall.com/cart/get_cart_product_count.do',
        type: 'post',
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
});


promiseFn1.then(()=>{
    console.log('promiseFn1 success');
    return promiseFn2;
}).then(()=>{
    console.log('promiseFn2 success');
});

下面是一个用Promise对象实现的 Ajax 操作的例子。

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});