JavaScript asyncAdd怎么实现异步加法
这篇文章主要介绍“JavaScript asyncAdd怎么实现异步加法”，在日常操作中，相信很多人在JavaScript asyncAdd怎么实现异步加法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript asyncAdd怎么实现异步加法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
前言
题目如下：
// 异步加法
function asyncAdd(a,b,cb){
setTimeout(() => {
cb(null, a + b)
}, Math.random() * 1000)
}
async function total(){
const res1 = await sum(1,2,3,4,5,6,4)
const res2 = await sum(1,2,3,4,5,6,4)
return [res1, res2]
}
total()
// 实现下 sum 函数。注意不能使用加法，在 sum 中借助 asyncAdd 完成加法。尽可能的优化这个方法的时间。
function sum(){
}分析 asyncAdd
这里先放置最终结论：
只能修改
sum部分的内容，sum可接收任意长度的参数sum中只能通过asyncAdd实现加法计算sum中需要处理异步逻辑，需要使用Promise需要优化
sum方法的计算时间
下面是分别通过对代码的不同部分进行分析，获取到的相关的信息。
直观的基本要求
// 实现下 sum 函数。注意不能使用加法，在 sum 中借助 asyncAdd 完成加法。尽可能的优化这个方法的时间。
function sum(){ }最直观的方式就是通过上述的文字描述部分，可以很容易知道题目具体要求：
实现
sum函数，即只能修改sum部分的内容不能直接使用加法（+），通过
asyncAdd实现加法优化
sum方法的计算时间
隐藏的考察点 — setTimeout & cb
// 异步加法
function asyncAdd(a, b, cb){
setTimeout(() => {
cb(null, a + b)
}, Math.random() * 1000)
}从上述内容来看，最明显的就是 setTimeout 和 cb 了，其实这不难理解因为在 asyncAdd 中使用了 setTimeout 只能通过回调函数 cb 将本次计算结果返回出去，那其中的第一个参数 null 代表什么呢？
其实可以认为它是一个错误信息对象，如果你比较了解 node 的话，就会知道在 node 中的异步处理的回调函数通常第一个参数就是错误对象，用于传递给外部在发生错误时自定义后续执行逻辑等。
一句话： cb 函数会接收 错误对象 和 计算结果 作为参数传递给外部。
隐藏的考察点 — async & await
async function total(){
const res1 = await sum(1,2,3,4,5,6,4)
const res2 = await sum(1,2,3,4,5,6,4)
return [res1, res2]
}从上述的这部分来看，sum 方法的 返回值 肯定是一个 promise 类型的，因为最前面明显的使用了 await sum(...) 的形式。
另外 total 函数返回值也必然是一个 promise 类型，因为整个 total 函数被定义为了一个 async 异步函数，可点击此处查看详细内容。
一句话：sum 需要返回 promise 类型的值，即 sum 一定会使用到 promise，并且从 sum(1,2,3,4,5,6,4) 可知 sum 可接收任意长度的参数。
实现 asyncAdd
具体实现
实现思路如下：
考虑到外部参数长度不固定，使用剩余运算符接收所有传入的参数
考虑到
asyncAdd中的异步操作，将其封装为Promise的实现，即caculate函数考虑到
asyncAdd实际只能一次接收两个数字进行计算，使用循环的形式将多个参数分别传入考虑到通过循环处理异步操作的顺序问题，使用
async/await来保证正确的执行顺序，且async函数的返回值正好符合sum是Promise类型的要求
具体代码如下：
// 通过 ES6 的剩余运算符（...） 接收外部传入长度不固定的参数
async function sum(...nums: number[]) {
// 封装 Promise
function caculate(num1: number, num2: number) {
return new Promise((resolve, reject) => {
// 调用 asyncAdd 实现加法
asyncAdd(num1, num2, (err: any, rs: number) => {
// 处理错误逻辑
if (err) {
reject(err);
return;
}
// 向外部传递对应的计算结果
resolve(rs);
});
})
}
let res: any = 0;
// 通过遍历将参数一个个进行计算
for (const n of nums) {
// 为了避免异步执行顺序问题，使用 await 等待执行结果
res = await caculate(res, n);
}
return res;
}进行优化
抽离内层函数
caculate函数可抽离到sum函数外层asyncAdd函数的回调函数没必要抽离，因为它依赖的参数和外部方法太多
function caculate(num1: number, num2: number) {
return new Promise((resolve, reject) => {
asyncAdd(num1, num2, (err: any, rs: number) => {
if (err) {
reject(err);
return;
}
resolve(rs);
});
})
}
async function sum(...nums: number[]) {
let res: any = 0;
for (const n of nums) {
res = await caculate(res, n);
}
return res;
}缓存计算结果
其实你仔细观察 total 方法，其中 sum 调用了两次，而且参数还是一模一样的，目的就是提示你在第二次计算相同内容时结果直接 从缓存中获取，而不是在通过异步计算。
async function total(){
const res1 = await sum(1,2,3,4,5,6,4)
const res2 = await sum(1,2,3,4,5,6,4)
return [res1, res2]
}以下只是一个简单的缓存方案的实现，不必过于纠结，具体实现如下：
const cash: any = {};
function isUndefined(target: any) {
return target === void 0;
}
async function sum(...nums: number[]) {
let res: any = 0;
const key = nums.join('+');
if (!isUndefined(cash[key])) return cash[key];
for (const n of nums) {
res = await caculate(res, n);
}
cash[key] = res;
return res;
}
function caculate(num1: number, num2: number) {
return new Promise((resolve, reject) => {
asyncAdd(num1, num2, (err: any, rs: number) => {
if (err) {
reject(err);
return;
}
resolve(rs);
});
})
}到此，关于“JavaScript asyncAdd怎么实现异步加法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论