«

JavaScript中Promise如何处理异步的并行与串行

时间：2024-4-8 09:11     作者：韩俊     分类： Javascript

这篇“JavaScript中Promise如何处理异步的并行与串行”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript中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);
});

     并行中的综合处理

    一起发送多个请求(处理多个异步)，但是需要等到所有异步都成功，我们再整体做啥事!!

    • 语法：let promise = 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 (in promise) 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);

    思路及图解

    思考题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);
});

    思路及图解

    思考题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');

    思路及图解

    标签: javascript

    热门推荐

    1 JavaScript Math.round() 方法
    2 怎么在Vue3中使用JSX
    3 vue在组件内部data是一个函数而不是一个对象的原因是什么
    4 WebSocket掉线重连的解决办法(reconnecting-websocket.js的使用)
    5 jQuery获取this当前对象子元素对象的方法
    6 js实现继承的5种方式
    7 js实现瀑布流的三种方式比较
    8 nodejs多线程怎么实现
    9 js实现下拉列表选中某个值的方法(3种方法)
    10 jQuery ajax再封装使用方法

    日历

    标签

    hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

    搜索

    最新文章

    热门文章