什么是promise

Promise 对象用于一个异步操作的最终结果（成功或失败）的表示。顾名思义，它代表一个承诺，一个对异步操作在未来产生的结果的假设（比如明天考试过了就去吃顿好的，挂了就去图书馆待一天）。
它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。
window.Promise是 JS 的一个全局对象。

Promise 规格文档

目前的 Promise 都遵循 Promises/A+ 规范。
看完规范和Promise mdn你可以了解 Promise 的全貌

Promise 的用途。

Promise 之前的时代——回调时代

假设我们调用ajax函数获取数据，它成功和失败时各调用一个函数（回调）：

  ajax({
    method: 'GET',
    url: '/x',
    success: successFn
    error:  errorFn
  })

function successFn(responseText){
      document.querySelector('#y').innerText = responseText
    }

function errorFn(status){
  alert('请求失败，状态码为' + status)
}

但是我们调用的时候可能会忘记参数名（success/error，success/fail，win/lose？），为解决这个问题出现了Promise。

Promise

Promise 的思路就是 ajax 返回一个对象，你往这个对象上挂回调：

var promise = ajax({method: 'GET',url: '/x'})
promise.then(successFn, errorFn)

当用户信息加载完毕，成功就执行successFn ，失败执行errorFn
把上面两句话合并成一句就是这样的：

ajax({method: 'GET',url: '/x'}).then(successFn, errorFn)

如果你想在用户信息获取结束后做更多事，可以继续 .then：

ajax({method:'GET',url:'/x'}).then(s1,e1).then(s2,e2)

请求成功后，会依次执行 s1、s2 。

promise可以使回调变得可控。你对比下面两个写法就知道了。

ajax(method: 'GET',url: '/x',successFn, errorFn)

ajax(method: 'GET',url: '/x',).then(successFn, errorFn)

用 Promise 之前，你不能确定successFn 是第几个参数；
用 Promise 之后，所有的回调都是
.then(success, error)
这样的形式。

总结Promise 的好处

1. 不用再去想参数名了（success/error，success/fail，win/lose）
2. then的形式
   promise.then(s1,e1).then(s2,e2)
   promise.then(s1,e1); promise.then(s2,e2)
   两者的区别就是前者第一次then之后的promise可能不是原来的promise
3. Promise API
   Promise.all([promise1, promise2]).then...
   //promise1, promise2执行完之后再then
   Promise.race([promise1, promise2]).then...
   //promise1, promise2有一个执行完之后就then
4. Promise 一定是异步的，不可能同步
   //then的存在造成了Promise 一定是异步的

ajax函数代码

为方便理解我之前没给出ajax函数代码,现在给出ajax函数代码

回调时代

function ajax(options){
  let {method, url, success, error} = options
  if(!method){ throw new Error('你神经病，怎么不传 method') } 
  url = url || location.href
  let xhr = new XMLHttpRequest()
  xhr.open(method, url)
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
      if(xhr.status>=200 && xhr.status < 400){
        success && success.call(null, xhr.responseText, xhr)
      }else if(xhr.status >= 400){
        error && error.call(null, xhr.status, xhr)
      }
    }
  }
  xhr.send()
}

返回promise对象

function ajax(options){
  return new Promise(function(resolve, reject){ // 1
    let {method, url} = options
    if(!method){ throw new Error('你神经病，怎么不传 method') } 
    url = url || location.href
    let xhr = new XMLHttpRequest()
    xhr.open(method, url)
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
        if(xhr.status>=200 && xhr.status < 400){
          resolve.call(null, xhr.responseText) // 2
        }else if(xhr.status >= 400){
          reject.call(null, xhr) // 3
        }
      }
    }
    xhr.send()
  })
}