深入了解下Promise

2019-02-27  本文已影响0人  cctosuper

Promise 意义

//回调地狱 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)
        })
    })
})

队列

function want() {}

function fn(want) {
    //一堆代码
    //
    //返回Promise对象
    return new Promise(function(resovle, reject) {
        if (typeof want === 'function') {
            resolve(want);
        } else {
            reject('TypeError: ' + wang + '不是一个函数')
        }
    })
}

Promise 对象三种状态

数据传递

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() //搞定~
上一篇 下一篇

猜你喜欢

热点阅读