Promise 意义
- Promise 的诞生与 Javascript 中异步编程息息相关，js 中异步编程主要指 setTimeout/setInterval、DOM 事件机制、ajax，通过传入回调函数实现控制反转。并行逻辑必须串行执行；
- 解决异步操作，避免形成回调地狱；
- 为了代码更加具有可读性和可维护性，将数据请求与数据处理明确得区分开来；
//回调地狱 1.依此处理data1、data2、 data3
request('data1.json', function(data1){
console.log(data1);
request('data2.json', function(data2){
console.log(data2);
request('data3.json', function(data3){
console.log(data3);
})
})
})
//得到三个数据后才进行下一步处理。数据不需串行请求，代码却串行执行，增加了等待时间
request('data1', function(data1) {
request('data2', function(data2) {
request('data3', fucntion(data3) {
console.log(data1, data2, data3)
})
})
})
队列
- setTimeout
- Promise 队列
function want() {}
function fn(want) {
//一堆代码
//
//返回Promise对象
return new Promise(function(resovle, reject) {
if (typeof want === 'function') {
resolve(want);
} else {
reject('TypeError: ' + wang + '不是一个函数')
}
})
}
Promise 对象三种状态
- pending
- resolve
- reject
三种状态不受外界影响， 而且状态只能从 pend 变为 resolved 或 rejected,并且不可逆
数据传递
function getJSON(url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true)
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
try {
var response = JSON.parse(xhr.responseText);
resolve(response)
} catch (e) {
reject(e);
}
} else {
reject(new Error(xhr.statusText))
}
}
}
})
}
getJSON(url).then(res => console.log(res))
Promise all
接受一个 Promise 对象组成得数组，当这个数组所有得 Promise 对象状态都变成 resolved 或者 rejected 得时候，才会调用 then
function renderAll() {
return Promise.all([getJSON(url), getJSON(url1)]);
}
renderAll().then(function(value){
console.log(value)
})
Promise race
与 Promise.all 类似，不同得是只要数组中得其中一个 Promise 状态变成 resolved 或 orejected，就调用 then 方法
一道面试题
题目：红灯三秒亮一次，绿灯一秒亮一次，黄灯 2 秒亮一次；如何让三个灯不断交替重复亮灯？（用 Promse 实现）三个亮灯函数已经存在：
function red(){
console.log('red');
}
function green(){
console.log('green');
}
function yellow(){
console.log('yellow');
}
主要问题是无限循环不能通过 while 实现，setTimeut 相关的异步队列会挂起直到主进程空闲，而使用 while 无限循环，主进程永远不会空闲，setTimeout 的函数也就永远不会执行。应该用递归实现，解决方案：
function red(){
console.log('red');
}
function green(){
console.log('green');
}
function yellow(){
console.log('yellow');
}
var tic = function(timmer, cb){
return new Promise(function(resolve, reject) {
setTimeout(function() {
cb();
resolve();
}, timmer);
});
};
var d = new Promise(function(resolve, reject){resolve();});
var step = function(def) {
def.then(function(){
return tic(3000, red);
}).then(function(){
return tic(2000, green);
}).then(function(){
return tic(1000, yellow);
}).then(function(){
step(def); //see me~~
});
}
step(d);
同时可以看到虽然 Promise 可以用来解决回调地狱问题，但仍然不可避免的出现回调，更好的解决方案是利用 Generater 来减少回调：
var tic = function(timmer, str) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log(str);
resolve(1);
}, timmer);
})
}
function *gen() {
yield tic(3000, 'red');
yield tic(1000, 'green');
yield tic(2000, 'yellow');
}
var iterator = gen();
var step = function(gen, iterator) {
var s = iterator.next();
if (s.done) {
step(gen, gen());
} else {
s.value.then(function() {
step(gen, iterator);
})
}
}
step(gen, iterator);
发现代码 依然不够优雅，
异步编程的最高境界，就是根本不用关心它是不是异步。
async 函数就是隧道尽头的亮光，很多人认为它是异步操作的终极解决方案。
var tic = function(timmer, str) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log(str);
resolve(1);
}, timmer);
})
}
async function gen() {
while(true) {
await tic(3000, 'red');
await tic(1000, 'green');
await tic(2000, 'yellow');
}
}
gen() //搞定~
网友评论