原生JS实现Promise解决ajax回调地狱

这里对于Promise的介绍及用法 还有关于回调地狱（一个函数作为参数需要依赖另一个函数执行调用）的解决方案有很多就不介绍了

今天主要实现的功能是原生的Ajax请求通过Promise包装

function AjaxPromise(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'http://localhost:8888/ajax%20promise/' + url);
    xhr.send(null);
    xhr.onreadystatechange = function() {
      if (xhr.readyState != 4) return;
      if (xhr.readyState == 4 && xhr.status == 200) {
        var res = xhr.responseText;
        resolve(res);
      } else {
        reject('服务器错误');
      }
    }
  })
}

AjaxPromise('01.php')
  .then(res => {
    console.log(res)
    return AjaxPromise('02.php');
  }).then(res => {
    console.log(res);　
    return AjaxPromise('03.php');
  }).then(res => {
    console.log(1);
    console.log(res);　
  })

我这里是本地服务器所以地址是 http://localhost:8888/ajax%20promise…

• 封装一个名为AjaxPromise 的函数用来返回一个Promise对象
• 由于是简写对于浏览器的兼容就没有写 直接 new XMLHttpRequest()
• open 函数拼接一个字符串后续方便很多
• 然后我们就是去监听 readyState 它的响应码 这里就相当于 success 里面的内容
• 然后就是将服务端的数据传递给 resolve 和 reject 让他们去推 Promise 的状态 由pending推向resolved
• 最后就是 then去异步执行

我这里的服务端代码也就是几个简单的数据

---

如有错误，请指正！