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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

算法魅力-双指针的实战

目录 1.双指针的介绍 1. 左右指针(对撞指针) 2. 快慢指针 2.题目练习讲解 2.1 移动零 算法思路 代码展示 画图效果效果 2.2 复写零 算法思路 代码展示 2.3 快乐数 算法思路 代码展示 2.4 盛最多水的容器 算法思路 代码展示 结束语 1.双指针的…

宝塔PHP8.1安装fileinfo拓展失败解决办法

在宝塔面板中安装PHP8.1后,安装fileinfo扩展一直安装不上,查看日志有报错,于是手动来安装也报错。 宝塔报错: 手动命令行编译安装同,也有报错 cd /www/server/php/81/src/ext/fileinfo/ make distclean ./configure …

【用74ls194实现1000-0100-0010-0001转换】2022-5-13

试用74194附加门电路设计1011011010序列发生器,并用示波器观察。要求:(1)写出设计过程;(2)画出电路图。 2、用multisim软件仿真实现上述序列信号发生器,CP频率为1KHz,用示…

【HarmonyOS】应用实现APP国际化多语言切换

【HarmonyOS】应用实现APP国际化多语言切换 前言 在鸿蒙中应用国际化处理,与Android和IOS基本一致,都是通过JSON配置不同的语言文本内容。在UI展示时,使用JSON配置的字段key进行调用,系统选择对应语言文本内容。 跟随系统多语言…

【scene_manager】与 MoveIt 机器人的规划场景进行交互

scene_manager Scene Manager包是由 Robotnik 创建的 ROS 包,旨在帮助构建和与 MoveIt 机器人的规划场景进行交互。 背景信息 MoveIt 规划场景 是一个用于存储机器人周围世界的表示(外部碰撞)以及机器人自身状态(内部碰撞和当…

rollup.js 插件实现原理与自定义

Rollup.js 是一个JavaScript模块打包器,它主要用于将小块代码编译成大块复杂的库或应用程序。相较于Webpack,Rollup更专注于代码的ES模块转换和优化,特别适合构建库或者那些对代码体积、执行效率有严格要求的应用。Rollup的核心特性之一就是它…

NETSH端口转发

NETSH介绍 netsh是windows系统自带命令行程序,攻击者无需上传第三方工具即可利用netsh程序可进行端口转 发操作,可将内网中其他服务器的端口转发至本地访问运行这个工具需要管理员的权限 实验场景 现在有如下的网络,电脑A是攻击机器&#x…

衡石分析平台系统分析人员手册-仪表盘控件概述

控件​ 控件是仪表盘的基本组成单位。控件种类很多,有展示分析数据的图表类类控件,有展示图片、文字的展示类控件,还有可导出数据、刷新数据、过滤数据等功能类控件。一个完整的仪表盘由多种不同功能的控件构成。 控件类型​ 根据控件是否展…

10月18日笔记(基于系统服务的权限提升)

系统内核漏洞提权 当目标系统存在该漏洞且没有更新安全补丁时,利用已知的系统内核漏洞进行提权,测试人员往往可以获得系统级别的访问权限。 查找系统潜在漏洞 手动寻找可用漏洞 在目标主机上执行以下命令,查看已安装的系统补丁。 system…

详解Java之Spring MVC篇一

目录 Spring MVC 官方介绍 MVC RequestMapping 传递参数 无参数 单个参数 针对String类型 针对Integer类型 针对int类型 针对自定义类型 多个参数 参数重命名 参数强制一致 参数不强制一致 传递数组 ​编辑传递List ​编辑 传递JSON ​编辑 从路径中获取参…

树上启发式合并(详解)

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

无需扩散,下一个token预测直达AGI!

目录 简单概括1 背景知识方法数据视觉 Tokenizer架构预训练 实验结果视频生成未来预测 简单概括 虽然&#xff0c;下一token预测已在大语言模型领域实现了ChatGPT等突破&#xff0c;但是在多模态模型中的适用性仍不明确&#xff0c;多模态任务仍然由扩散模型&#xff08;如Sta…

大规模创新类竞赛评审方案的建模与研究

随着科技的发展和教育制度的改革&#xff0c;近年来涌现出一批以“创新”为主题的竞赛项目。这类竞赛的运行模式为&#xff0c;参赛队伍提交文档、视频或幻灯片等文本形式的作品&#xff0c;专家对参赛队伍提交的作品评阅判分&#xff0c;一份作品将由多位专家独立进行评阅打分…

19.面试算法-树的深度优先遍历(一)

1. 深入理解前中后序遍历 深度优先遍历有前中后三种情况&#xff0c;大部分人看过之后就能写出来&#xff0c;很遗憾大部分只是背下来的&#xff0c;稍微变换一下就废了。 我们再从二叉树的角度看递归&#xff0c;每次遇到递归&#xff0c;都按照前面说的四步来写&#xff0c…

从壹开始解读Yolov11【源码研读系列】——cfg:模型配置加载功能

目录 一、模型配置操作&#xff1a;cfg.__init__.py 1.cfg.cfg2dict&#xff1a;yaml转字典 2.cfg.get_cfg&#xff1a;读取覆盖配置 3.cfg全局配置参数查询表 ①*基础参数配置&#xff1a; ②*训练参数配置&#xff1a; ③验证测试参数配置&#xff1a; ④*预测参数配置&…

element plus中menu菜单技巧

我在使用element plus的menu&#xff08;侧边栏&#xff09;组件的过程中遇到了一些问题&#xff0c;就是menu编写样式和路由跳转&#xff0c;下面给大家分享以下&#xff0c;我是怎么解决的。 1.页面效果 我要实现的网站布局是这样的&#xff1a; 侧边栏折叠以后的效果&#…

使用 Spring 框架构建 MVC 应用程序:初学者教程

Spring Framework 是一个功能强大、功能丰富且设计精良的 Java 平台框架。它提供了一系列编程和配置模型&#xff0c;旨在简化和精简 Java 中健壮且可测试的应用程序的开发过程。 人们常说 Java 太复杂了&#xff0c;构建简单的应用程序需要很长时间。尽管如此&#xff0c;Jav…

PHP露营地管理小程序系统源码

&#x1f3d5;️露营新风尚&#xff01;露营地管理小程序系统&#xff0c;打造完美露营体验✨ &#x1f4cd;营地预订&#xff0c;轻松搞定&#x1f4c5; 想要逃离城市的喧嚣&#xff0c;享受大自然的宁静&#xff1f;露营地管理小程序系统让你的露营计划轻松实现&#xff01…

Vulnhub打靶-Empire-LupinOne

基本信息 靶机下载&#xff1a;https://download.vulnhub.com/empire/01-Empire-Lupin-One.zip 攻击机器&#xff1a;192.168.20.128&#xff08;Windows操作系统&#xff09;& 192.168.20.138&#xff08;kali&#xff09; 提示信息&#xff1a; 这个盒子被创建为中等…

FineReport 填报简介vs控件vs页面设置

填报简介 填报功能可以将页面数据写入到数据库&#xff0c;包括数据的增加、删除和修改操作。同时也支持对填写数据的自定义校验&#xff0c;Excel 导入数据&#xff0c;根据填写值智能联动等功能。 填报控件 设计填报报表时&#xff0c;如果需要修改和新增数据&#xff0c;则…