敞开生长之旅！这是我参与「日新计划 12 月更文挑战」的第21天，点击检查活动概况第27篇文

Promise处理异步的并行和串行

一、异步的“并行”

一同处理，相互之间没啥依靠

// 履行FN1回来一个promise实例，实例中管理了一个异步编程的代码，当定时器到时刻后，才会把实例的状况改为成功
const fn1 = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(1);
        }, 1000);
    });
};
const fn2 = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(2);
        }, 2000);
    });
};
const fn3 = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(3);
        }, 3000);
    });
}; 
// 异步的“并行”：一同处理，相互之间没啥依靠
fn1().then(result => {
    console.log(result);
});
fn2().then(result => {
    console.log(result);
});
fn3().then(result => {
    console.log(result);
});

并行中的归纳处理

一同发送多个恳求(处理多个异步)，可是需要比及所有异步都成功，咱们再整体做啥事!!

  • 语法：letpromise=Promise.all([promise1,promise2,…]);

  • 履行Promise.all回来一个新的promise实例@P

    • 并且传递一个数组，数组中包含N多其它的promise实例

    • 假如数组中的每一个promise实例最终都是成功的，则@P也将会是成功的，它的值也是一个数组，按照顺序顺次存储各个promise实例的成果；但凡数组中的某个promsie实例是失利的，则@P也是失利的，值是当时这个实例失利的原因!

    • 假如数组中有一项并不是promise实例(例如：是个100)，则浏览器也会把其默许变为一个状况是成功的promsie实例，值便是当时项自身

let p = Promise.all([Promise.resolve(100), fn1(), 200, fn3(), fn2()]); //浏览器默许会把200 变为一个成功的promsie实例
p.then(results => {
    console.log(`成功：${results}`); // 成功：100,1,200,3,2 顺序和最开始是共同的，不会考虑谁先成功
}).catch(reason => {
    console.log(`失利：${reason}`);
}); 
//new Error('xxx')不是promise实例=》Promise.resolve(new Error('xxx')) 值是Error目标
let p = Promise.all([Promise.resolve(100), fn1(), new Error('xxx'), Promise.reject(200), fn3(), fn2()]);
p.then(results => {
    console.log(`成功：${results}`);
}).catch(reason => {
    console.log(`失利：${reason}`); //失利：200 遇到过错直接回来
}); 
//=>等三个异步都成功做什么工作 所用时刻3s
Promise.all([fn1(), fn2(), fn3()]).then(results => {
    console.log(`三个异步都成功了，分别的成果：${results}`);
});

二、异步的“串行”：

第一个异步成功才能发送第二个，第二个成功才能发送第三个….多个异步之间一般是有依靠的

2.1 then链机制处理

promise状况是失利，假如不用catch(或许onrejected)处理，控制台会抛出异常：Uncaught(inpromise)xxx，可是此异常不会阻止下面代码履行!!

fn1().then(result => {
    console.log(`第一个成功:${result}`);
    return fn2();
}).then(result => {
    console.log(`第二个成功:${result}`);
    return fn3();
}).then(result => {
    console.log(`第三个成功:${result}`);
}).catch(reason => {
    console.log(`只要其间一个失利，直接顺延到这里，其他剩下的恳求就不发送了!`);
});

2.2 实在项目中，想完成异步的串行，咱们一般运用async+await

(async function () {
    let result = await fn1();
    console.log(`第一个成功:${result}`);
    result = await fn2();
    console.log(`第二个成功:${result}`);
    result = await fn3();
    console.log(`第三个成功:${result}`);
})();

2.3 promise.then(onfulfilled,onrejected) 在内存中的履行

首先，咱们复习一下事件循环机制EventLoop

  • 同步代码履行，遇到一个异步使命

    • 1.先把其放在WebAPI进行监听

    • 2.当时异步使命监听到能够履行了，则再把其放在EventQueue中，排队等候履行

  • 同步使命履行完，主线程闲暇下来

    • 1.去EventQueue中找可履行的微使命，假如微使命中都履行完了，再去找可履行的宏使命「行列：优先级行列&先进先出」

    • 2.取到的使命都放在Stack中交给主线程去履行

    • ……

那么接下来咱们来了解一下promise.then(onfulfilled,onrejected) 在内存中的履行

promise.then(onfulfilled,onrejected) 在内存中的履行

  • 状况一：我此刻现已知道promise是成功还是失利的

    • 咱们此刻应该去履行onfulfilled或许onrejected，可是不是当即履行，它是一个异步的微使命

    • 首先把履行对应的办法这个工作放在WebAPI中监听，可是由于此刻现已知道状况了，对应的办法必定能够履行，所以紧接着把它挪至到EventQueue中「异步微使命行列」等候履行

  • 状况二：此刻的promise还是pending状况

    • 咱们把onfulfilled/onrejected先存储起来，只有当后边，咱们把实例的状况修改为成功/失利的时分，再取出之前存储的办法，把其履行「并且此刻再履行，还是个异步微使命」

    • 还是要经历：WebAPI->EventQueue

三、aysnc修饰符

aysnc最主要的作用便是：假如想在函数中运用await,则当时函数有必要基于async修饰

aysnc修饰符，让函数的回来值成为一个promise实例 这样就能够基于THEN链去处理了

  • 假如函数自己自身就回来一个promise实例，则以自己回来的为主

  • 假如函数自己自身没有回来promise,则会把回来值变为一个promise实例：状况=> 成功 值=>回来值

  • 假如函数履行报错则回来的实例状况是失利，值是报错原因，但不影响下面代码履行

async function fn() {
    return 10;
}
fn().then(result => {
    console.log(result);//输出10
}); 
async function fn() {
    return async function () {
        return 10;
    };
}
fn().then(result => {
    // result:async function () {...}  函数
    return result();
}).then(result => {
    console.log(result); //10
});

四、await:等候

  • 咱们一般在其后边放promise实例 它会等候实例状况为成功，再去履行“当时上下文”中 ,await下面的代码

【假如promise实例管控的是一个异步编程，其实它是在等候异步成功，再履行下面的代码，类似于把异步改为同步的作用】

  • await 10 =>默许转为 await Promise.resolve(10)

    • 假如后边放的不是promise实例，则浏览器默许把其转换为”状况为成功，值便是这个值 ” 的实例
const fn1 = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(1);
        }, 1000);
    });
};
(async function () {
    let result = await fn1();
    console.log(result); 
  //下面代码能够履行，说明await后边的promise实例，它的状况现已是成功了，await的回来值便是当时promise实例的值
    console.log('OK');
})(); 
//=======================假如await后边的promise实例状况是失利的
const fn1 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(0);
        }, 1000);
    });
};
(async function () {
    let result = await fn1(); //假如await后边的promise实例状况是失利的，则下面代码永久都不会履行了
    console.log(result);
    console.log('OK');//假如是失利的则这句话不会履行
})();
//===================================================
(async function () {
    let a = await 10; //->Promise.resolve(10)
    console.log(a); //10
    let b = await Promise.resolve(20);
    console.log(b); //20
    try {
        let c = await Promise.reject(30); //Uncaught (in promise) 30
        console.log(c);
    } catch (err) {
        console.log(err); //30
    }
    console.log('OK'); //'OK'
})();

await中的异步

await中的异步：当时上下文，await下面的代码履行是异步微使命

  • 状况1：await后边的promise实例咱们已知是成功的

    先把微使命放置在WebAPI中，可是知道是能够履行的，则直接在挪至到EventQueue中等候履行

  • 状况2：await后边的promise实例还是pending状况

此刻咱们把微使命放置在WebAPI中监听，比及后期promise实例是成功态后，再把它挪至到EventQueue中等候履行即可

(async function () {
    let b = await Promise.resolve(20);
    console.log(b);
})()

五、思考题

思考题1

console.log(1);
setTimeout(() => { console.log(2); });//宏1
console.log(3);
let p1 = new Promise(resolve => {//new Promise 当即会把executor函数履行 是同步
    console.log(4);
    resolve('A'); //履行resolve P1的状况是成功=》已知
    console.log(5);
});
console.log(6);
p1.then(result => {//.then是异步 已知状况 放进WebAPI中监听 可是由于是已知状况 办法必定履行 则从WebAPI监听行列挪到EventQueue中等候
    console.log(result); //微1
});
console.log(7);
let p2 = new Promise(resolve => { //当即履行executor函数 setTimeout是异步则会放进WebAPI监听 宏2
    setTimeout(() => {
        resolve('B');
        console.log(10); //履行宏2=>@1 更改了p2的状况 @2之前存储的.then办法履行
    });
});
console.log(8);
p2.then(result => {//p2的状况是未知则会先存起来
    console.log(result);
});
console.log(9);

思路及图解

Promise处理异步的并行和串行

思考题2

基于事件绑定归于异步宏使命

let body = document.body;
body.addEventListener('click', function () {
    Promise.resolve().then(() => {
        console.log(1);
    });
    console.log(2);
});
body.addEventListener('click', function () {
    Promise.resolve().then(() => {
        console.log(3);
    });
    console.log(4);
});

思路及图解

Promise处理异步的并行和串行

思考题3

 async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function (resolve) {
    console.log('promise1');
    resolve();
}).then(function () {
    console.log('promise2');
});
console.log('script end');

思路及图解

Promise处理异步的并行和串行

相关文章

前端开发中的同步异步编程eventloop

Promise根底