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

Promise

Promise 就是一个对象，用来传递异步操作的消息。有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来。

1. Promise特点

承诺将来会执行
防止回调地狱 - Callback Hell
可以进行then的链式执行
区分数据请求和数据处理
三种状态
- pending：等待中，或者进行中，表示还没有得到结果
- resolved（fullfilled）：已经完成，表示得到了我们想要的结果，可以继续往下执行
- rejected：也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行
调用时会被传递两个参数：resolve和reject函数
具备then()方法，对于then()方法有以下简单的要求：
1. 接收完成态、错误态的回调方法
2. 可选地支持progress事件回调作为第三个方法
3. 只接受function对象
4. 返回Promise对象，以实现链式调用

2. 如何创建AJAX

一个Ajax建立要了解以下几点：

XMLHttpRequest对象的工作流程
兼容性处理
事件的触发条件
事件的触发顺序

步骤：

创建XMLHttpRequest对象，也就是创建一个异步调用对象。
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息。
设置响应HTTP请求状态变化的函数。
发送HTTP请求。
获取异步调用返回的数据。
使用JavaScript和DOM实现局部刷新。

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

var url = '/请求的路径';
var params = {
    id: 'id=123',
    limit: 'limit=10'
};

// 封装一个get请求的方法
function getJSON(url) {
    return new Promise(function (resolve, reject) {
        var XHR = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');

        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.statusText));
                }
            }
        }
        XHR.open('GET', url + '?' + params.join('&'), true);
        XHR.send(null);
    })
}

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

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

readyState的值等于3，就是“流”(streaming)，它是提升数据性能的强大工具。

4. Promise 语法

代码以实现异步操作img为例

4.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')
})

4.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()

4.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);
        })

    // 这样，我们就把请求数据，与处理数据分离开来，维护起来就更加方便了，代码结构也足够清晰
})