首页 > 其他分享 >8 个关于 Promise 的高级用途的技巧

8 个关于 Promise 的高级用途的技巧

时间：2024-01-05 13:00:48浏览次数：27  
标签：resolve const 技巧 await 用途 next promise Promise

我发现很多人只知道如何常规地使用promise。

在js项目中，promise的使用应该是必不可少的，但我发现在同事和面试官中，很多中级以上的前端仍然坚持promiseInst.then()、promiseInst.catch()、Promise等常规用法等等。即使是 async/await 他们也只知道它但不知道为什么要使用它。

但实际上，Promise 有很多巧妙的高级用法，并且一些高级用法在 alova 请求策略库内部也被广泛使用。

现在，我将与大家分享8个高级使用技巧。希望这些技巧能够对你有所帮助，现在，我们就开始吧。

1. Promise数组的串行执行

例如，如果你有一组接口需要串行执行，你可能首先想到使用await。

const requestAry = [() => api.request1(), () => api.request2(), () => api.request3()];
for (const requestItem of requestAry) {
  await requestItem();
}

如果使用promise，可以使用then函数串联多个promise，实现串行执行。

const requestAry = [() => api.request1(), () => api.request2(), () => api.request3()];
const finallyPromise = requestAry.reduce(
     (currentPromise, nextRequest) => currentPromise.then(() => nextRequest()),
     Promise.resolve() // Create an initial promise for linking promises in the array
);

2. 在新的 Promise 范围之外更改状态

假设你有多个页面，其功能要求在允许使用之前收集用户信息。 点击使用某个功能之前，会弹出一个弹框进行信息收集。 你会如何实施这个？

以下是不同级别前端同学的实现思路：

初级前端：我写一个模态框，然后复制粘贴到其他页面。 效率非常高！

中级前端：这个不好维护。 我们需要单独封装这个组件，并在需要的页面引入！

高级前端：安装任何密封的东西！ ！ ！ 把方法调用写在所有页面都可以调用的地方不是更好吗？

想要了解高级前端是如何实现的，以vue3为例，看一下下面的例子。

<!-- App.vue -->
<template>
<!-- The following is the modal box component -->
   <div class="modal" v-show="visible">
     <div>
       User name: <input v-model="info.name" />
     </div>
     <!-- Other information -->
     <button @click="handleCancel">Cancel</button>
     <button @click="handleConfirm">Submit</button>
   </div>
   <!-- Page components -->
</template>
<script setup>
import { provide } from 'vue';
const visible = ref(false);
const info = reactive({
   name: ''
});
let resolveFn, rejectFn;
// Pass the information collection function to the following
provide('getInfoByModal', () => {
   visible.value = true;
   return new Promise((resolve, reject) => {
     // Assign the two functions to the outside and break through the promise scope
     resolveFn = resolve;
     rejectFn = reject;
   });
})
const handleConfirm = () => {
   resolveFn && resolveFn(info);
};
const handleCancel = () => {
   rejectFn && rejectFn(new Error('User has canceled'));
};
</script>

接下来，getInfoByModal就可以通过直接调用模态框来轻松获取用户填写的数据。

<template>
   <button @click="handleClick">Fill in the information</button>
</template>


<script setup>
import { inject } from 'vue';
const getInfoByModal = inject('getInfoByModal');
const handleClick = async () => {
   // After the call, the modal box will be displayed. After the user clicks to confirm, the promise will be changed to the fullfilled state to obtain the user information.
   const info = await getInfoByModal();
   await api.submitInfo(info);
}
</script>

这也是很多UI组件库中封装常用组件的一种方式。

3. async/await 的替代用法

很多人只知道它是用来在调用await时接收async函数的返回值的，却不知道async函数它实际上是一个返回promise的函数。 例如，以下两个函数是等效的：

const fn1 = async () => 1;
const fn2 = () => Promise.resolve(1);


fn1(); // Also returns a promise object with a value of 1

在大多数情况下，await 会跟随 Promise 对象并等待它完全填充。 因此，下面的 fn1 函数 wait 也是等价的：

await fn1();


const promiseInst = fn1();
await promiseInst;

然而，await也有一个鲜为人知的秘密。 当它后面跟的值不是promise对象时，它会用promise对象包装该值，所以await后面的代码必须异步执行。 例子：

Promise.resolve().then(() => {
  console.log(1);
});
await 2;
console.log(2);
//Print order bits: 1 2

相当于

Promise.resolve().then(() => {
  console.log(1);
});
Promise.resolve().then(() => {
  console.log(2);
});

4. 承诺实施请求共享

当一个请求已经发出但尚未得到响应时，再次发出相同的请求，就会造成请求的浪费。 此时，我们可以将第一个请求的响应与第二个请求共享。

request('GET', '/test-api').then(response1 => {
  // ...
});
request('GET', '/test-api').then(response2 => {
  // ...
});

上述两个请求实际上只发送一次，同时收到相同的响应值。

那么，请求共享有哪些使用场景呢？ 我认为有以下三个：

  • 当页面渲染多个内部组件同时获取数据时；
  • 提交按钮未禁用且用户连续多次点击提交按钮；
  • 预加载数据的情况下，预加载完成之前进入预加载页面；

这也是alova的高级功能之一。 要实现请求共享，需要使用promise的缓存功能，即一个promise对象可以通过多次await获取数据。 简单的实现思路如下：

const pendingPromises = {};
function request(type, url, data) {
   // Use the request information as the only request key to cache the promise object being requested
   //Requests with the same key will reuse promise
   const requestKey = JSON.stringify([type, url, data]);
   if (pendingPromises[requestKey]) {
     return pendingPromises[requestKey];
   }
   const fetchPromise = fetch(url, {
     method: type,
     data: JSON.stringify(data)
   })
   .then(response => response.json())
   .finally(() => {
     delete pendingPromises[requestKey];
   });
   return pendingPromises[requestKey] = fetchPromise;
}

上述两个请求实际上只发送一次，同时收到相同的响应值。

那么，请求共享有哪些使用场景呢？ 我认为有以下三个：

  • 当页面渲染多个内部组件同时获取数据时；
  • 提交按钮未禁用且用户连续多次点击提交按钮；
  • 预加载数据的情况下，预加载完成之前进入预加载页面；

这也是alova的高级功能之一。 要实现请求共享，需要使用promise的缓存功能，即一个promise对象可以通过多次await获取数据。 简单的实现思路如下：

const promise = new Promise((resolve, reject) => {
  resolve();
  reject();
});

正确答案是已满状态。 我们只需要记住，一旦待处理的promise从一种状态转移到另一种状态，就无法更改。 因此，例子中是先转为fulfilled状态，然后reject()就不会再转为rejected状态。

5.彻底明确then/catch/finally返回值

一句话概括就是，上面三个函数都会返回一个新的promise包装对象。 包装后的值是执行回调函数的返回值。 如果回调函数抛出错误，它将包装拒绝状态承诺。 似乎不太容易理解，我们来看一个例子：

我们可以将它们一一复制到浏览器控制台并运行它们以帮助理解。

// then function
Promise.resolve().then(() => 1); // The return value is new Promise(resolve => resolve(1))
Promise.resolve().then(() => Promise.resolve(2)); // Return new Promise(resolve => resolve(Promise.resolve(2)))
Promise.resolve().then(() => {
   throw new Error('abc')
}); // Return new Promise(resolve => resolve(Promise.reject(new Error('abc'))))
Promise.reject().then(() => 1, () => 2); // The return value is new Promise(resolve => resolve(2))


//catch function
Promise.reject().catch(() => 3); // The return value is new Promise(resolve => resolve(3))
Promise.resolve().catch(() => 4); // The return value is new Promise(resolve => resolve(promise object that calls catch))
//When the finally function returns a non-promise value, return the promise object before the finally function.
Promise.resolve().finally(() => {}); // Return Promise.resolve()
Promise.reject().finally(() => {}); // Return Promise.reject()
// When the return value of the finally function is promise, wait for the returned promise to be parsed before returning the promise object before the finally function.
Promise.resolve(5).finally(() => new Promise(res => {
   setTimeout(res, 1000);
})); // Return the Promise in pending status, which will be resolved to 5 after 1 second.
Promise.reject(6).finally(() => new Promise(res => {
   setTimeout(res, 1000);
})); // Return the Promise in the pending state, and throw the number 6 after 1 second

6、then函数的第二次回调和catch回调有什么区别？

当请求发生错误时，会触发 Promise 的 then 的第二个回调函数和 catch。 乍一看没有区别，但实际上前者无法捕获then当前第一个回调函数中抛出的错误，但catch可以。

Promise.resolve().then(
   () => {
     throw new Error('Error from success callback');
   },
   () => {
     // will not be executed
   }
).catch(reason => {
   console.log(reason.message); // Will print out "error from success callback"
});

原理就如上一点所说的。 catch 函数是在 then 函数返回的处于拒绝状态的 Promise 上调用的，因此它的错误自然可以被捕获。

7.（最终）Promise实现koa2洋葱中间件模型

koa2框架引入了洋葱模型，可以让你的请求像剥洋葱一样一层层进去，再一层层出来，从而实现请求前后处理的统一。

8 个关于 Promise 的高级用途的技巧_预加载


我们来看一个简单的 koa2 洋葱模型：

const app = new Koa();
app.use(async (ctx, next) => {
  console.log('a-start');
  await next();
  console.log('a-end');
});
app.use(async (ctx, next) => {
  console.log('b-start');
  await next();
  console.log('b-end');
});


app.listen(3000);

上面的输出是a-start -> b-start -> b-end -> a-end，这样神奇的输出序列是如何实现的呢？ 有人没天赋，简单的用20行左右的代码就实现了。 如有雷同，纯属巧合。

接下来我们分析一下

注：以下内容对新手不友好，请谨慎阅读。

首先先保存中间件函数，在listen函数中收到请求后调用洋葱模型执行。

function action(koaInstance, ctx) {
  // ...
}


class Koa {
   middlewares = [];
   use(mid) {
     this.middlewares.push(mid);
   }
   listen(port) {
     // Pseudocode simulates receiving request
     http.on('request', ctx => {
       action(this, ctx);
     });
   }
}

收到请求后，从第一个中间件开始串行执行next之前的前置逻辑。

//Start to start middleware call
function action(koaInstance, ctx) {
   let nextMiddlewareIndex = 1; // Identifies the next middleware index to be executed


   //Define next function
   function next() {
     // Before peeling the onion, calling next will call the next middleware function
     const nextMiddleware = middlewares[nextMiddlewareIndex];
     if (nextMiddleware) {
       nextMiddlewareIndex++;
       nextMiddleware(ctx, next);
     }
   }
   //Start execution from the first middleware function and pass in the ctx and next functions
   middlewares[0](ctx, next);
}

处理next之后的post逻辑

function action(koaInstance, ctx) {
   let nextMiddlewareIndex = 1;
   function next() {
     const nextMiddleware = middlewares[nextMiddlewareIndex];
     if (nextMiddleware) {
       nextMiddlewareIndex++;
       // A return is also added here to allow the execution of the middleware function to be executed in series from back to front using promises (it is recommended to understand this return repeatedly)
       return Promise.resolve(nextMiddleware(ctx, next));
     } else {
       // When the pre-logic of the last middleware is executed, return the fullyfilled promise and start executing the post-logic after next.
       return Promise.resolve();
     }
   }
   middlewares[0](ctx, next);
}

至此，一个简单的洋葱模型就已经实现了。

标签：resolve,const,技巧,await,用途,next,promise,Promise
From： https://blog.51cto.com/u_15739596/9113142

相关文章

  • 关于JavaScript的技巧一
    1.滚动到页面顶部我们可以使用window.scrollTo()平滑滚动到页面顶部。constscrollToTop=()=>{window.scrollTo({top:0,left:0,behavior:"smooth"});};2.滚动到页面底部当然，如果知道文档的高度，也可以平滑滚动到页面底部。constscrollToBottom=()=>{wind......
  • 【迅搜13】搜索技巧（三）排序与评分算法
    搜索技巧（三）排序与评分算法今天要学习的，第一部分是排序相关的功能，第二部分则是跟排序密切相关的另一块功能，评分算法。又是算法了，也就是说，又是一大块的理论知识了。今天的文章不长，因为我们的功能测试非常少，但却很重要，因为我们要讲到的理论算法是现在最主流的，也是各种搜索引擎的都在使......
  • 【迅搜12】搜索技巧（二）搜索条件详解
    搜索技巧（二）搜索条件详解上回我们已经学习了一些简单的搜索功能，比如设置搜索语句、分页方法、数量查询以及高亮和折叠的查询效果。而今天，我们将更加深入地学习其它搜索相关的内容。最核心的，就是布尔查询，也就是类似于我们在数据库中的AND和OR之类的语法。不过在这之前，就像是Expl......
  • ThreadLocal：你不知道的优化技巧，Android开发者都在用
    引言在Android开发中，多线程是一个常见的话题。为了有效地处理多线程的并发问题，Android提供了一些工具和机制。其中，ThreadLocal是一个强大的工具，它可以使得每个线程都拥有自己独立的变量副本，从而避免了线程安全问题。本文将深入探讨Android中的ThreadLocal原理及其使用技巧，帮助你更......
  • 优化 Linux 服务器的 9 个小技巧，让 Linux 服务器效率起来
    正常使用环境下的Linux服务器有精准、稳定、高效、安全等需求，其优化也是有着很多的窍门。本文分享了九条平时进行Linux服务器优化的经验，内容涉及邮件服务器、Web服务器、网络配置、内存管理等方面原创：厦门微思网络  【微思2002年成立，专业IT认证培训21年！】运维工程师必备-Linux-......
  • 微信长按功能小技巧汇总
    微信除了常规的聊天、朋友圈功能外，还隐藏着许多实用的小技巧，它们就藏在你每天使用的功能之中。今天，就让我来为你揭秘这些微信长按功能的小技巧，让你的微信使用更加得心应手！快⭐️起来吧，以免要用的时候找不到，宝子们下期见啦！......
  • Python爬虫技巧大全：提升效率、应对反爬与处理异常
    Python爬虫是一项强大的工具，但在实践中常常会遇到各种问题，如效率低下、反爬机制等。本文将介绍一些Python爬虫的技巧，帮助读者提升爬虫效率、应对反爬机制以及处理异常情况。一、提升爬虫效率1.使用多线程或异步编程：通过多线程或异步编程可以提高爬虫的并发性能，加快数据的获取速度。......
  • class086 动态规划中得到具体决策方案的技巧【算法】
    class086动态规划中得到具体决策方案的技巧【算法】算法讲解086【必备】动态规划中得到具体决策方案的技巧code1最长公共子序列//最长公共子序列其中一个结果//给定两个字符串str1和str2//输出两个字符串的最长公共子序列//如果最长公共子序列为空，则输出-1//测试链接:......
  • Python编程技能的技巧和建议
    Python是一门强大且灵活的编程语言，但要成为一名精通的Python开发者，需要不断提升自己的编码技巧。本文将介绍15个能够帮助大家提高Python编程技能的技巧和建议，从而让你的键盘飞起，编写更高效和可维护的Python代码。使用列表推导式列表推导式是一种精简创建列表的方式，它可以在一行代......
  • 恢复删除的文件：掌握这些技巧，轻松找回丢失的数据
    现代社会中，数据的重要性不言而喻，随着科技的不断发展，我们的工作、生活和学习都越来越依赖电子设备。然而，高度数字化的时代，文件丢失问题时有发生。意外删除、格式化、系统崩溃等都可能导致重要文件丢失，给我们带来许多烦恼和损失。这种情况下，如果能掌握文件恢复方法，将可以及时挽救损失......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99