利用Promise知识，用原生JS封装Ajax

Promise

1. Promise特点

• 承诺将来会执行
• 防止回调地狱 - Callback Hell
• 可以进行then的链式执行
• 区分数据请求和数据处理
• 三种状态
  • pending：等待中，或者进行中，表示还没有得到结果
  • resolved（fullfilled）：已经完成，表示得到了我们想要的结果，可以继续往下执行
  • rejected：也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行
• 调用时会被传递两个参数：resolve和reject函数

利用Promise知识，用原生JS封装AJAX

var url = 'https://请求的路径';

// 封装一个get请求的方法
function getJSON(url) {
  return new Promise(function (resolve, reject) {
    var XHR = new XMLHttpRequest();

    XHR.onreadystatechange = function () {
      //readyState属性表示请求/响应过程的当前活动阶段。
      if (XHR.readyState == 4) {
        if ((XHR.status >= 200 && XHR.status < 300) || XHR.status == 304) {
          try {
            var response = JSON.parse(XHR.responseText);
            resolve(response);
          } catch (e) {
            reject(e);
          }
        } else {
          reject(new Error("Request was unsuccessful: " + XHR.status));
        }
      }
    }
    XHR.open('GET', url, true);
    XHR.send(null);
  })
}

getJSON(url).then(resp => console.log(resp));

readyState
0 - 代表未初始化。 还没有调用 open 方法
1 - 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 - 代表已加载完毕。send 已被调用。请求已经开始
3 - 代表交互中。服务器正在解析响应内容
4 - 代表完成。响应发送完毕

2. Promise 语法

以异步操作img为例

2.1 ES5 异步Callback实现

function loadImg(src, callback, fail) {
    var img = document.createElement('img')
    img.onload = function () {
        callback(img)
    }
    img.onerror = function () {
        fail()
    }
    img.src = src
}
var src = 'https://img.mukewang.com/5be2bcb30001a46709360316.jpg'
loadImg(src, function (img) {
    console.log(img.width)
}, function () {
    console.log('failed')
})

2.2 Promise实现

function loadImg(src) {
    const promise = new Promise(function (resolve, resolve) {
        var img = document.createElement('img')
        img.onload = function () {
            resolve(img)
        }
        img.onerror = function () {
            reject()
        }
        img.src = src
    })
    return promise
}


var src = 'https://img.mukewang.com/5be2bcb30001a46709360316.jpg'
var result = loadImg(src)

result.then(function (img) {
    console.log(img.width)
}, function () {
    console.log('failed')
})
result.then(function (img) {
    console.log(img.height)
})

优点：便于集成、扩展
注意：

• new Promise 实例，必须要 return
• new Promise 时要传入函数，函数有 resolve reject 两个参数
• 成功时执行 resolve() 失败时执行 reject()

2.3 重要语法

• Promise.all接收一个Promise对象组成的数组作为参数，当这个数组所有的Promise对象状态都变成resolved或者rejected的时候，它才会去调用then方法。

• Promise.race与Promise.all相似的是，Promise.race都是以一个Promise对象组成的数组作为参数，不同的是，只要当数组中的其中一个Promsie状态变成resolved或者rejected时，就可以调用.then方法了。

• 如何有效的将ajax的数据请求和数据处理分别放在不同的模块中进行管理

  • 将所有的数据请求这个动作放在同一个模块中统一管理

  define(function(require) {
      var API = require('API');
  
      // 因为jQuery中的get方法也是通过Promise进行了封装，最终返回的是一个Promise对象，因此这样我们就可以将数据请求与数据处理放在不同的模块，即使用一个统一的模块来管理所有的数据请求
  
      // 获取当天的信息
      getDayInfo = function() {
          return $.get(API.dayInfo);
      }
  
      // 获取type信息
      getTypeInfo = function() {
          return $.get(API.typeInfo);
      };
  
      return {
          getDayInfo: getDayInfo,
          getTypeInfo: getTypeInfo
      }
  });
  

  可以增加过滤处理

  • 拿到数据并处理数据

  // components/calendar.js
  define(function(require) {
      var request = require('request');
  
      // 拿到数据之后，需要处理的组件，可以根据数据渲染出需求想要的样式
  
      request.getTypeInfo()
          .then(function(resp) {
  
              // 拿到数据，并执行处理操作
              console.log(resp);
          })
  
      // 这样，我们就把请求数据，与处理数据分离开来，维护起来就更加方便了，代码结构也足够清晰
  })