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