记录--整会promise这8个高级用法

这篇具有很好参考价值的文章主要介绍了记录--整会promise这8个高级用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--整会promise这8个高级用法

发现很多人还只会promise常规用法

在js项目中,promise的使用应该是必不可少的,但我发现在同事和面试者中,很多中级或以上的前端都还停留在promiseInst.then()promiseInst.catch()Promise.all等常规用法,连async/await也只是知其然,而不知其所以然。

但其实,promise还有很多巧妙的高级用法,也将一些高级用法在alova请求策略库内部大量运用。

现在,我把这些毫无保留地在这边分享给大家,看完你应该再也不会被问倒了,最后还有压轴题哦

觉得对你有帮助还请点赞收藏评论哦!

1. promise数组串行执行

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

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

如果使用promise的写法,那么你可以使用then函数来串联多个promise,从而实现串行执行。

const requestAry = [() => api.request1(), () => api.request2(), () => api.request3()];
const finallyPromise = requestAry.reduce(
    (currentPromise, nextRequest) => currentPromise.then(() => nextRequest()),
    Promise.resolve(); // 创建一个初始promise,用于链接数组内的promise
);

2. 在new Promise作用域外更改状态

假设你有多个页面的一些功能需要先收集用户的信息才能允许使用,在点击使用某功能前先弹出信息收集的弹框,你会怎么实现呢?

以下是不同水平的前端同学的实现思路:

初级前端:我写一个模态框,然后复制粘贴到其他页面,效率很杠杠的!

中级前端:你这不便于维护,我们要单独封装一下这个组件,在需要的页面引入使用!

高级前端:封什么装什么封!!!写在所有页面都能调用的地方,一个方法调用岂不更好?

看看高级前端怎么实现的,以vue3为例来看看下面的示例。

<!-- App.vue -->
<template>

  <!-- 以下是模态框组件 -->
  <div class="modal" v-show="visible">
    <div>
      用户姓名:<input v-model="info.name" />
    </div>
    <!-- 其他信息 -->
    <button @click="handleCancel">取消</button>
    <button @click="handleConfirm">提交</button>
  </div>

  <!-- 页面组件 -->
</template>

<script setup>
import { provide } from 'vue';

const visible = ref(false);
const info = reactive({
  name: ''
});
let resolveFn, rejectFn;

// 将信息收集函数函数传到下面
provide('getInfoByModal', () => {
  visible.value = true;
  return new Promise((resolve, reject) => {
    // 将两个函数赋值给外部,突破promise作用域
    resolveFn = resolve;
    rejectFn = reject;
  });
})

const handleConfirm = info => {
  resolveFn && resolveFn(info);
};
const handleCancel = () => {
  rejectFn && rejectFn(new Error('用户已取消'));
};
</script>

接下来直接调用getInfoByModal即可使用模态框,轻松获取用户填写的数据。

<template>
  <button @click="handleClick">填写信息</button>
</template>

<script setup>
import { inject } from 'vue';

const getInfoByModal = inject('getInfoByModal');
const handleClick = async () => {
  // 调用后将显示模态框,用户点击确认后会将promise改为fullfilled状态,从而拿到用户信息
  const info = await getInfoByModal();
  await api.submitInfo(info);
}
</script>

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

3. async/await的另类用法

很多人只知道在async函数调用时用await接收返回值,但不知道async函数其实就是一个返回promise的函数,例如下面两个函数是等价的:

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

fn1(); // 也返回一个值为1的promise对象

await在大部分情况下在后面接promise对象,并等待它成为fullfilled状态,因此下面的fn1函数等待也是等价的:

await fn1();

const promiseInst = fn1();
await promiseInst;

然而,await还有一个鲜为人知的秘密,当后面跟的是非promise对象的值时,它会将这个值使用promise对象包装,因此await后的代码一定是异步执行的。如下示例:

Promise.resolve().then(() => {
  console.log(1);
});
await 2;
console.log(2);
// 打印顺序位:1  2

等价于

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

4. promise实现请求共享

当一个请求已发出但还未响应时,又发起了相同请求,就会造成了请求浪费,此时我们就可以将第一个请求的响应共享给第二个请求。

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

上面两个请求其实只会真正发出一次,并且同时收到相同的响应值。

那么,请求共享会有哪几个使用场景呢?我认为有以下三个:

  1. 当一个页面同时渲染多个内部自获取数据的组件时;
  2. 提交按钮未被禁用,用户连续点击了多次提交按钮;
  3. 在预加载数据的情况下,还未完成预加载就进入了预加载页面;

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

const pendingPromises = {};
function request(type, url, data) {
  // 使用请求信息作为唯一的请求key,缓存正在请求的promise对象
  // 相同key的请求将复用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;
}

5. 同时调用resolve和reject会怎么样?

大家都知道promise分别有pending/fullfilled/rejected三种状态,但例如下面的示例中,promise最终是什么状态?

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

正确答案是fullfilled状态,我们只需要记住,promise一旦从pending状态转到另一种状态,就不可再更改了,因此示例中先被转到了fullfilled状态,再调用reject()也就不会再更改为rejected状态了。

6. 彻底理清then/catch/finally返回值

先总结成一句话,就是以上三个函数都会返回一个新的promise包装对象,被包装的值为被执行的回调函数的返回值,回调函数抛出错误则会包装一个rejected状态的promise。,好像不是很好理解,我们来看看例子:

// then函数
Promise.resolve().then(() => 1); // 返回值为 new Promise(resolve => resolve(1))
Promise.resolve().then(() => Promise.resolve(2)); // 返回 new Promise(resolve => resolve(Promise.resolve(2)))
Promise.resolve().then(() => {
  throw new Error('abc')
}); // 返回 new Promise(resolve => resolve(Promise.reject(new Error('abc'))))
Promise.reject().then(() => 1, () = 2); // 返回值为 new Promise(resolve => resolve(2))

// catch函数
Promise.reject().catch(() => 3); // 返回值为 new Promise(resolve => resolve(3))
Promise.resolve().catch(() => 4); // 返回值为 new Promise(resolve => resolve(调用catch的promise对象))

// finally函数
// 以下返回值均为 new Promise(resolve => resolve(调用finally的promise对象))
Promise.resolve().finally(() => {});
Promise.reject().finally(() => {});

7. then函数的第二个回调和catch回调有什么不同?

promise的then的第二个回调函数和catch在请求出错时都会被触发,咋一看没什么区别啊,但其实,前者不能捕获当前then第一个回调函数中抛出的错误,但catch可以。

Promise.resolve().then(
  () => {
    throw new Error('来自成功回调的错误');
  },
  () => {
    // 不会被执行
  }
).catch(reason => {
  console.log(reason.message); // 将打印出"来自成功回调的错误"
});

其原理也正如于上一点所言,catch函数是在then函数返回的rejected状态的promise上调用的,自然也就可以捕获到它的错误。

8. (压轴)promise实现koa2洋葱中间件模型

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

记录--整会promise这8个高级用法

 

我们来看一个简单的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行左右的代码简单实现了一番,如有与koa雷同,纯属巧合。

接下来我们分析一番

注意:以下内容对新手不太友好,请斟酌观看。

  1. 首先将中间件函数先保存起来,并在listen函数中接收到请求后就调用洋葱模型的执行。
function action(koaInstance, ctx) {
  // ...
}

class Koa {
  middlewares = [];
  use(mid) {
    this.middlewares.push(mid);
  }
  listen(port) {
    // 伪代码模拟接收请求
    http.on('request', ctx => {
      action(this, ctx);
    });
  }
}
  1. 在接收到请求后,先从第一个中间件开始串行执行next前的前置逻辑。
// 开始启动中间件调用
function action(koaInstance, ctx) {
  let nextMiddlewareIndex = 1; // 标识下一个执行的中间件索引
  
  // 定义next函数
  function next() {
    // 剥洋葱前,调用next则调用下一个中间件函数
    const nextMiddleware = middlewares[nextMiddlewareIndex];
    if (nextMiddleware) {
      nextMiddlewareIndex++;
      nextMiddleware(ctx, next);
    }
  }
  // 从第一个中间件函数开始执行,并将ctx和next函数传入
  middlewares[0](ctx, next);
}
  1. 处理next之后的后置逻辑
function action(koaInstance, ctx) {
  let nextMiddlewareIndex = 1;
  function next() {
    const nextMiddleware = middlewares[nextMiddlewareIndex];
    if (nextMiddleware) {
      nextMiddlewareIndex++;
      // 这边也添加了return,让中间件函数的执行用promise从后到前串联执行(这个return建议反复理解)
      return Promise.resolve(nextMiddleware(ctx, next));
    } else {
      // 当最后一个中间件的前置逻辑执行完后,返回fullfilled的promise开始执行next后的后置逻辑
      return Promise.resolve();
    }
  }
  middlewares[0](ctx, next);
}
到此,一个简单的洋葱模型就实现了。

本文转载于:

https://juejin.cn/post/7263089207128850489

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--整会promise这8个高级用法文章来源地址https://www.toymoban.com/news/detail-624000.html

到了这里,关于记录--整会promise这8个高级用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【ES6】Promise.all用法

    Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。 上面代码中,Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()方法的参数可以

    2024年02月09日
    浏览(35)
  • 分享一个500页面给大家

    先看效果: 再看代码:

    2024年02月06日
    浏览(54)
  • 分享一个403界面给大家

    先看效果图(说明:小鬼影会飘来飘去,长时间停留会有小惊喜,具体大家跑一下就知道): 代码如下: PS:发现我用文字写太生硬了,干的噎嗓子,干脆在代码里加注释了。

    2024年02月06日
    浏览(46)
  • 【ES6】Promise.race的用法

    Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。 上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。 Promise.race()方法的参数与Promise.all()方法一样,如果不是 Pr

    2024年02月10日
    浏览(36)
  • 【ES6】Promise.allSettled的用法

    Promise.allSettled() 是一个Promise方法,用于处理一个Promise数组,返回一个新的Promise数组,每个元素对应原始Promise的状态。这个方法可以用于处理多个异步操作,并且能够获取每个操作的结果和状态。 下面是Promise.allSettled()的详细代码示例: 输出结果: 在上面的代码中,我们创

    2024年02月10日
    浏览(39)
  • 分享三个ai写作生成器给大家

    在当今数字化时代,随着人工智能的快速发展,ai写作软件已经成为越来越多人关注的热门话题。这些创新的软件利用机器学习和自然语言处理等技术,能够生成一些好的文章、博客、新闻稿甚至小说等内容,大大地提升了写作的效率和质量。然而,面对众多的ai写作软件选择

    2024年02月16日
    浏览(58)
  • 这几个ai写作生成器分享给大家

    大家知道吗,现在市场有许多ai写作软件,它们已经能够模仿人类的写作风格,帮大家轻松地生成文章。我对于非常感兴趣,于是就上网查了一下有可以ai写作的软件吗?结果真的找到几款不错的软件,今天借这个机会我将它们分享给你。 以下是今天分享的ai写作软件 一:A

    2024年02月15日
    浏览(57)
  • 必做的高收益自媒体平台,分享给大家

    现在市面上的自媒体平台是非常多的,大大小小加起来也有30好几个,但是要说到哪些平台收益比较高,那就不得不提到下面这个几个主流平台,今天就给大家分享一下收益比较高的几个主流平台。 第一个:百家号 百家号平台目前的收益单价在众多自媒体平台来说真的算是非

    2024年02月12日
    浏览(39)
  • 记录 Promise 的方法

    Promise 是异步编程的一种解决方案,比传统的回调函数或事件更合理和更灵活。 Promise的原型方法:then/catch/finally,这三种方法很常用, then 用于处理Promise转为 fulfilled 状态时的代码, catch 用于处理Promise转为 rejected 状态时的代码(当然 then 的第二个参数也可处理 rejected 状态

    2023年04月14日
    浏览(32)
  • ES6 - promise.all和race方法的用法详解

    一、前言 谈谈你对Promise的理解? 答 :Promise用来解决异步回调问题,由于js是单线程的,很多异步操作都是依靠回调方法实现的,这种做法在逻辑比较复杂的回调嵌套中会相当复杂;也叫做回调地狱; promise用来将这种繁杂的做法简化,让程序更具备可读性,可维护性;pro

    2024年02月15日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包