ES6 Promise的用法

学习链接:ES6 Promise的用法,ES7 async/await异步处理同步化,异步处理进化史_哔哩哔哩_bilibili

一、同步与异步区别

1.JavaScript代码是单线程的程序,即通过一行一行代码顺序执行,即同步概念。

2.若处理一些简短、快速的运算操作时主线程就够了;若在同步程序出现了网络请求,当网络请求超时时,下面的代码依赖于网络请求,整个网页会失去响应。

3.与同步相反,异步过程的执行将不再与原有的序列有顺序关系,特别是对发送网络请求,不确保响应时间时候,异步是最优选择,网络请求无论多长时间,程序将不会在此等待,直接走下面的代码,等异步的请求有了响应,主线程几乎不用关心异步任务的状态了,自己完成回调后续的操作,程序间互不影响。

4.如果涉及到网络请求没有依赖关系的话,异步请求是效率最高的,但是下一个的方法依赖于上一个网络请求的结果,那么就必须使用await命令,将异步结果等待返回之后再执行后面的代码

二、使用Promise的原因

异步调用获取到结果后,为下一个异步函数提供参数,所以就会一层一层的出现回调里面嵌入回调,导致层次很深,代码维护起来特别的复杂,导致“回调地狱”。

例:通过分类id获取该分类id下的文章,再通过文章的id获取该文章id下的评论

promise是解决异步的方法,本质上是一个构造函数,可以用它实例化一个对象。对象身上有resolve、reject、all,原型上有then、catch方法。promise对象有三种状态:pending(初识状态/进行中)、resolved或fulfilled(成功)、rejected(失败),能够有效解决“回调函数”。

  • pending: "待定的,将发生的",相当于是一个初始状态。创建Promise对象时,且没有调用resolve或者是reject方法,相当于是初始状态。这个初始状态会随着你调用resolve,或者是reject函数而切换到另一种状态。
  • resolved:“解决了”。 要实现从pending到resolved的转变,需要在 创建Promise对象时,在函数体中调用了resolve方法 
  • rejected:“拒绝,失败”。要实现从pending到rejected的转换,只需要在创建Promise对象时,调用reject函数

三、将回调函数修改为promise方案

函数返回promise对象

methods: {//先获取导航分类接口,将结果进行返回,到调用函数的地方获取getNav(callback){return new Promise((resolve,reject)=>{uni.request({url:"https://ku.qingnian8.com/dataApi/news/navlist.php",success:res=>{resolve(res)},fail:err=>{reject(err)}})})},//获取文章数据,将文章列表进行返回getArticle(id){return new Promise((resolve,reject)=>{uni.request({url:"https://ku.qingnian8.com/dataApi/news/newslist.php",data:{cid:id},success:res=>{resolve(res)},fail:err=>{reject(err)}})})},//获取文章下的所有评论getComment(id){return new Promise((resolve,reject)=>{uni.request({url:"https://ku.qingnian8.com/dataApi/news/comment.php",data:{aid:id},success:res=>{resolve(res)},fail:err=>{reject(err)}})})} 

.then的链式调用函数


this.getNav().then(res=>{let id=res.data[0].id;return this.getArticle(id);
}).then(res=>{let id=res.data[0].id;return this.getComment(id)
}).then(res=>{console.log(res)
}) 作者:咸虾米_ https://www.bilibili.com/read/cv18799030/?spm_id_from=333.999.0.0 出处:bilibili

Promise.all封装多个对象统一,可在页面开始前设置loading,当三个请求全部完毕后再进行关闭loading,异步函数同步化

let p1 = this.getNav()let p2 = this.getList(51)let p3 = this.getComment(51)Promise.all([p1,p2,p3]).then(res=>{console.log(res)
}

四、await / async ES7的新规范,异步处理同步化

这两个命令是成对出现的,如果使用await没有在函数中使用async命令,那就会报错,如果直接使用async没有使用await不会报错,只是返回的函数是个promise,可以,但是没有意义,所以这两个一起使用才会发挥出它们本身重要的作用。

用await+异步请求时,会等待异步请求结束后再进行后续操作,即异步请求同步化

async onLoad() {let id,res;res=await this.getNav();id=res.data[0].id;res=await this.getArticle(id);id=res.data[0].id;res=await this.getComment(id);console.log(res)
} 作者:咸虾米_ https://www.bilibili.com/read/cv18799030/?spm_id_from=333.999.0.0 出处:bilibili

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/454010.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uploads-labs靶场刷题记录

Pass-01 尝试上传一句话木马 1.php: <?php eval($_POST[cmd]);?>发现设置了白名单且抓包没有记录&#xff0c;说明在前端进行的拦截&#xff08;可以禁用前端的JS从而绕过拦截&#xff0c;达到直接上传木马的目的&#xff09;。 将一句话木马文件加上.jpg后缀1.php.jp…

后端常用安全措施

一、限流 1.简介 限流就是限制流量&#xff0c;但这里的流量是一个比较笼统的概念。如果考虑各种不同的场景&#xff0c;限流是非常复杂的&#xff0c;而且和具体的业务规则密切相关 通过限流&#xff0c;可以控制服务请求的速率&#xff0c;从而提高系统应对突发大流量的能…

ElementPlus中时间选择器配置

看文档老是力不从心&#xff0c;感觉找不到自己想要的样式的选择器记录一下吧 <el-date-pickerv-model"group.timeLimit"type"datetimerange":default-time"DEFAULT_DATE_TIME"range-separator"-"start-placeholder"开始时间&…

计算机组成原理一句话

文章目录 计算机系统概述存储系统 计算机系统概述 指令和数据以同等地位存储在存储器中&#xff0c;形式上没有差别&#xff0c;但计算机应能区分他们。通过指令周期的不同阶段。 完整的计算机系统包括&#xff0c;1&#xff09;软件系统&#xff1a;程序、文档和数据&#xff…

字符串(3)_二进制求和_高精度加法

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 字符串(3)_二进制求和_高精度加法 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目…

2024 四川省大学生信息安全技术大赛 安恒杯 部分 WP

文章目录 一、前言二、MISCunzip-png拓展 第47张图片重要的文件 三、WEB四、CRYPTO五、REVERSE 一、前言 WP不完整&#xff0c;仅供参考&#xff01; 除WEB外&#xff0c;其余附件均已打包完毕&#xff0c;在这里也是非常感谢师傅的附件支持&#xff01; 123网盘下载&#x…

最佳简历--JAVA程序员的项目经验如何写

小熊学Java全能学习+面试指南:https://www.javaxiaobear.cn 首先你要明确,你能干什么,包括你自己编写的专业技能,到底会不会,怎么运用到技术上的? 1、你能干什么? 你能干什么,其实就展现你的能力,这是简历中最重要的部分,你需要证明前面说的你会的东东; 这就有点…

三周精通FastAPI:1 第一步入门

FastAPI是一个非常棒的python web和api框架&#xff0c;准备用三周的时间“精通它” 学习流程参考FastAPI官网的用户教程&#xff1a;教程 - 用户指南 - FastAPI 学前提示 运行代码 所有代码片段都可以复制后直接使用&#xff08;它们实际上是经过测试的 Python 文件&#x…

【前端】如何制作一个自己的网页(14)

当我们还需要对网页中的内容进行局部样式的修改。这时候&#xff0c;就需要用到HTML中的重要元素&#xff1a;span。 span是一个行内元素&#xff0c;可以对HTML文档中的内容进行局部布局。 如图&#xff0c;我们给标题和段落元素的部分内容设置了各种样式。 接下来&#xff0…

树上启发式合并(详解)

核心思想 借用了一个节点到根的路径上轻边个数不会超过logn条。 故重节点保留&#xff0c;轻节点删去&#xff0c;多重统计。 实际复杂度&#xff08;nlogn&#xff09; 例题 Lomsat gelral - 洛谷 AC 代码 #include<bits/stdc.h> #define int long long using na…

新型电力系统精细化时序模拟分析软件

一、背景意义 在“碳达峰碳中和”及“新型电力系统”战略引领下&#xff0c;新型电力系统电力电量平衡分析成为电力系统规划运行模拟仿真的必要环节。近年来&#xff0c;随着电网新能源渗透率逐渐提升&#xff0c;储能等灵活性调节资源大幅增加&#xff0c;传统的基于典型曲线…

qiankun 应用之间数据传递

qiankun 应用之间数据传递 全局共享 initGlobalState qiankun initGlobalState API 单击前往 qiankun 内部提供了 initGlobalState 方法用于注册 MicroAppStateActions 实例用于通信&#xff0c;该实例有三个方法&#xff0c;分别是onGlobalStateChange、setGlobalState、of…

小巧设计,强大功能:探索SoC模块的多样化功能

LoRa-STM32WLE5模块基于ST的STM32WLE5芯片&#xff0c;采用LoRa调制&#xff0c;适用于超远程和超低功耗无线电解决方案。搭载高性能Arm Cortex-M4核心&#xff0c;频率高达48 MHz&#xff0c;支持256 KB闪存和64 KB运行内存&#xff0c;具备安全性增强功能。广泛应用于安防、智…

C++进阶之路:日期类的实现、const成员(类与对象_中篇)

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

ue5 扇形射线检测和鼠标拖拽物体

这里的NumTrace是要发射几根射线&#xff0c;Degrees Per Trace是每根射线之间的角度&#xff0c; 例如 要在角色面前实现一个180度的扇形射线检测&#xff0c;就需这两个变量乘起来等于180 TraceLength是射线的长度 下面是鼠标拖动物体逻辑&#xff0c;很简单 这里的Floor和…

文心快码 - Baidu Comate 让AI帮你提高生产力|AI代码助理

码随心动&#xff0c;快人一步&#xff0c;更懂你的智能代码助手 基于文心大模型&#xff0c;结合百度编程大数据&#xff0c;为你生成优质编程代码。文心快码 - Baidu Comate&#xff0c;更懂你的AI编程伙伴&#xff0c;研发效率提升好帮手。 一、更懂研发知识 开发速度快 构…

提示词高级阶段学习day3.1

第三个类型就是让模型做信息的转化 最直观的例子就是翻译 去翻译英文&#xff0c;它的效果都非常好 除此之外&#xff0c;给大家举一个让大模型翻译代码的例子&#xff0c; 还有就是让大模型写代码的 这是一个数据分析场景&#xff0c;其实数据分析场景一直追求的就是一个…

LeetCode 精选 75 回顾

目录 一、数组 / 字符串 1.交替合并字符串 &#xff08;简单&#xff09; 2.字符串的最大公因子 &#xff08;简单&#xff09; 3.拥有最多糖果的孩子&#xff08;简单&#xff09; 4.种花问题&#xff08;简单&#xff09; 5.反转字符串中的元音字母&#xff08;简单&a…

企业级调度器 LVS

集群和分布式基础知识 系统性能的扩展方式 当一个系统&#xff0c;或一个服务的请求量达到一定的数量级的时候&#xff0c;运行该服务的服务器的性能和资源上限&#xff0c; 很容易成为其性能瓶颈。除了性能问题之外&#xff0c;如果只部署在单台服务器上&#xff0c;在此服务…

iOS Swift逆向——deMangle过程中的偏移计算

碰到好多函数最开始都会调用这个函数&#xff0c;xref了一下&#xff0c;发现有上万个xref。 __int64 __fastcall sub_1000B6ED0(__int64 *a1) {__int64 result; // x0result *a1;if ( result < 0 ){result swift_getTypeByMangledNameInContext((char *)a1 (int)result…