深入了解下Promise

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() //搞定~