了解 Promise

Promise 很好的解决了异步操作的时候回调地狱的问题, 让你轻松的写出下面的代码；

fetchData().then((res) => {
  //  do something
}).catch(e => {
  //  deal with error
})

可以看出这是一个链式调用。 调用的起点是 fetchData()， 我们假设这个方法调用就表示一个异步操作，
js里面异步操作最多的可能就是 ajax 请求了， 以ajax请求为例， 从发出请求到接收到请求， 都会经历一段时间。fetchData 其实隐藏了很多东西， 但是我们大体可以看出这种逻辑 => 经过方法之后肯定返回了某个东西， 如果返回的是我们想要的比如 ajax请求成功了， 我们拿到了数据， 那就走 then 方法， 如果没有那就走 catch 方法， 对于 es7 来说还可以添加一个 finally 方法， 表示异步调用无论成功还是失败都会走的方法， 很有 try catch finally 的味道。

let p = new Promise((resolve, reject) => {
   //  do something
})

promise实例 p 表示一个异步执行的结果, 在新建一个promise 对象的时候， 接收一个函数， 在该函数内部你可以操作异步的具体逻辑；
下面的例子用 setTimeout 模拟了一个异步调用。
这里的 resolve reject 跟最终 promise实例的 then catch 方法其实是一对， 如果调用了 resolve 方法就会走 then 调用了 reject 就会走 catch；

function getData(timer) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let tail = String(new Date().getTime()).substr(-7)
      if (timer >= 5) {
        reject({
          status: 'fail',
          timer,
          tail
        });
      } else {
        resolve({
          status: 'ok',
          timer,
          tail
        })
      }
    }, timer * 10)
  })
};
getData(4).then(sv => {
  console.log(sv)
  return getData(++sv.timer)
}).then(sv => {
  console.log(sv)
  return getData(++sv.timer)
}).catch(err => {
  console.error(err)
})

Promise.all([
  getData(1),
  getData(2),
  getData(6)
]).then(sv => {
  console.log(sv)
  return sv;
}).catch(fv => {
  console.log(fv)
})

用 Promise 封装 Ajax (简陋版本, 不考虑 IE 的兼容性)

function axin(ar) {
  const BASEURL = ar.baseUrl || window.location.host + window.location.pathname;
  return new Promise((resolve, reject) => {
  //  实例化一个 XMLHttpRequest 对象
    let xhr = new XMLHttpRequest();
   //  绑定 xhr.readyState 改变时候的回调 
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200 || xhr.status === 304) {
          resolve(xhr.responseText);
          console.log("请求成功")
        } else {
          reject(xhr);
          console.error("请求错误")
        }
      }
    };
    //  初始化请求
    xhr.open(ar.methods, BASEURL + ar.url);
    //  设置请求头 (可选)
   xhr.setReauestHeaders("Accept", "*/*")
    //  发出请求 
    xhr.send(null);
  });
}
//  xhr.readyState 的值代表了 xhr 对象所处的状态
//  xhr.status 代表的是服务器响应的http 的状态码 具体的状态码代表的信息请参见 MDN
//  xhr.responseText 代表的是服务器响应的内容
//  xhr.open(method, url, async, user, password)
//  xhr 的 open 方法, 用于初始化一个请求， 接受 5 个参数后三个可选
//  method: http 方法比如 get, post, delete, put
//  url: 请求的路径
//  async: 是否是异步的 后面两个代表用户以及密码

//  xhr.setRequestHeaders 用于设置请求头， 需要注意的是该方法只能用在 open 方法之后， 并且是在 send 之前， 否则抛出错误  方法接受俩参数 header: 请求头的名字 value 请求头的值

//  xhr.send() 用于发出请求 get 或者是 head 方法的时候参数不填或者填 null
axin({
  methods: "get",
  baseUrl: "https://api.myjson.com/",
  url: "bins/bmzjk"
})
  .then(res => {
    console.log(res);
  })
  .catch(e => {
    console.error(e);
  });
//  -----------------------------------------------------
//  HTML5 将 XMLHttpReauest纳入了规范并且增加了一些新的内容
//  1 - 设置请求的超时时间
//  2 - 通过 FormData 发送表单数据
//  3 - 上传文件
//  4 - 支持跨域请求
//  5 - 获取服务器的二进制数据
//  6 - 获取数据传递的进度信息

//  xhr.timeout
//  跟 xhr.setRequestHeader 一样 只能在 xhr.open 之后 xhr.send 之后设置 数值类型 单位是毫秒

//  发送表单数据
//  FormData 用于模拟表单
let xhr_formdata = new XMLHttpRequest();
// ---------  省略监听状态的代码 ---------------
let fomData = new FromData();
//  向表单添加数据
fomData.append("userName", "zhu");
fomData.append("userAge", 12);
xhr.open("POST", "/api/form");
xhr.send(formData);