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

Promise

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

1. Promise特点

承诺将来会执行

防止回调地狱 - Callback Hell

可以进行then的链式执行

区分数据请求和数据处理

三种状态

pending：等待中，或者进行中，表示还没有得到结果

resolved(fullfilled)：已经完成，表示得到了我们想要的结果，可以继续往下执行

rejected：也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行

调用时会被传递两个参数：resolve和reject函数

具备then()方法，对于then()方法有以下简单的要求：

接收完成态、错误态的回调方法

可选地支持progress事件回调作为第三个方法

只接受function对象

返回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);

})

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

})