es6学习一 promise上

简单来说promise在异步操作上提供可读性。（原来es5的异步操作可读性实在太糟糕了,如下图）

瞬间眼前百万只奔腾的马，只不过这种马有个别名，羊驼。

一、创建形式

1. 使用的基本形式：

let promise = new Promise((resolve, reject) => {
  // 设置异步执行的函数条件
  let flag = true;
  if (true) {
    resove();
  } else {
    reject();
  }
});

promise.then(() => {
  //TODO
}, () => {
  //TODO
}).catch(err => {
  console.error(err);
});

• Promise.propotype.then()方法中的两个参数（函数）分别对应是Promise中的resolve和reject。

• Promise.propotype.catch() 的方法是出现错误，执行的函数。

catch 和 reject 的区别？

catch 可以是系统的错误，也就是说catch所报的错误不是认为控制的；而 reject 的错误是人为对参数设计条件的不满足的错误。

2. 传参的异步使用方式

function asyne(arg) {
  let promise = new Promise((resolve, reject) => {
    // 设置异步执行的函数条件
    let flag = true;
    if (flag) {
      resolve(arg);
    } else {
      reject(new Error('This is a error!'));
    }
  });
  return promise;
}

asyne(1).then(value => {
  // TODO
  console.log(1);
}, function(error) {
  // TODO
}).catch(err => {
  console.log(`Error: ${err})`);
});

3. 链式调用

let promise = new Promise((resolve, reject) => {
    resove();
});

promise.then(() => {
  return new Promise((resolve, reject) => {
    resove();
  });
}).then(() => {
  // TODO
});

二、 应用

1. 图片加载

function loadImageAsync(url) {
  return new Promise((resolve, reject) => {
    var image = new Image();
    image.onload = function() {
      resolve(image);
    };
    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };
    image.src = url;
  });
}

let img_url = 'http://img2.niutuku.com/desk/1208/1404/ntk-1404-393.jpg';
loadImageAsync(img_url).then(img => {
  document.body.appendChild(img);
});

2. Ajax上的应用

var getJSON = function(url) {
  var promise = new Promise((resolve, reject) => {
    var client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
  });
  return promise;
};

getJSON("/package.json").then(json => {
  console.log(`Content: ${json}`);
},err => {
	console.error(`Error: ${err}`);
});