ES6 Promise的用法

news2024/10/18 22:43:54

学习链接: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.coloradmin.cn/o/2218065.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构部分混淆

1.随机存储和顺序存储: 随机存取:数组,当存储器中的数据被读取或写入时,所需要的时间与该数据所在的物理地址无关 顺序存取:链表,当存储器中的数据被读取或写入时,所需要的时间与该数据所在的物…

力扣之1412.查找成绩处于中游的学生

题目: sql建表语句: Create table If Not Exists Student (student_id int, student_name varchar(30)); Create table If Not Exists Exam (exam_id int, student_id int, score int); Truncate table Student; insert into Student (student_id,…

linux环境下的程序设计与git操作

目录 前言: 进度条小程序: 先介绍几个背景知识 代码实现 Git操作 总结 其他指令 前言: 本文将重点介绍1. linux下的程序设计,并使用linux下的几个函数接口。实现一个简单的小程序 2.本着开源精神,进行git操作。…

OPENSSL-2023/11/10学习记录-C/C++对称分组加密DES

对称分组加密常用算法: DES 3DES AES 国密SM4 对称分组加密应用场景: 文件或者视频加密 加密比特币私钥 消息或者配置项加密 SSL通信加密 对称分组加密 使用异或实现一个简易的对称加密算法 A明文 B秘钥 AB密文AB (AB)B A 密码补全和初始化 数…

在Access中执行SQL语句

1.新建一个查询 2. 关闭弹出的窗口,创建一个空查询 3. 在“设计”页中点击“数据定义”进入输入SQL语句界面 4. “执行”后就能看到执行结果 5.如果想再次执行SQL,则可在MDI窗口标题栏右键,在弹出的菜单中选择“SQL 视图”即可

Vue向上滚动加载数据时防止内容闪动

目前的需求:当前组件向上滚动加载数据,dom加载完后,页面的元素位置不能发生变化 遇到的问题:加载完数据后,又把滚轮滚到之前记录的位置时,内容发生闪动 现在的方案: 加载数据之前记录整体滚动条…

Spring AI 整体介绍_关键组件快速入门_prompt_embedding等

Spring AI:Java开发者的AI集成新利器 在过去,Java开发者在构建AI应用时面临着缺乏统一框架的问题,导致不同AI服务的集成过程复杂且耗时。Spring AI应运而生,旨在为基于Java的应用程序提供一个标准化、高效且易于使用的AI开发平台…

51单片机的超声波视力保护仪【proteus仿真+程序+报告+原理图+演示视频】

1、主要功能 该系统由AT89C51/STC89C52单片机LCD1602显示模块温度传感器光照传感器超声波传感器按键、LED、蜂鸣器等模块构成。适用于视力保护仪、坐姿矫正器、超声波防近视等相似项目。 可实现功能: 1、LCD1602显示温度、光照、距离和学习时间 2、超声波传感器采集头部与探…

如何做好SQL 数据库安全

随着信息技术的迅猛发展,数据库在现代信息系统中的重要性日益凸显。无论是电子商务平台、金融系统还是社交媒体应用,数据库都是其核心组件之一。其中,SQL(Structured Query Language,结构化查询语言)数据库…

效率飞跃 | SOLIDWORKS 2025:草图与装配体设计再升级!

一年一度的SOLIDWORKS新版本已经发布,快来看看SOLIDWORKS 2025这些让您眼前一亮的新功能,它们将为您的研发过程增添强大助力。 一、草图绘制 1、通过 XYZ 点生成的曲线可以选取坐标系统 新版本可选择曲线起点位置 2、转换实体作为构造几何体 转换实体…

Science Robotics 通过新材料打造FiBa软机器人 可实现四种形态进化

近几年由于材料科学的进步,软机器人相关技术近几年研究成果显著,与传统的刚性机器人相比,软机器人的设计灵感来源于自然界中的生物系统,如蠕虫、章鱼、壁虎和青蛙等。这些生物利用柔软、有弹性的材料,在复杂环境中展现…

微服务基础架构(图)

微服务基础架构是一种现代化的软件架构模式,旨在将大型复杂的应用程序拆分为多个小型、独立的服务。每个微服务专注于特定的业务功能,可独立开发、部署和扩展。 在微服务基础架构中,通常会使用轻量级的通信机制,如 RESTful API 或…

C++简易日志系统:打造高效、线程安全的日志记录工具

目录 引言: 1.日志的基本概念 1.1.什么是日志? 1.2.我们为什么需要日志? 2.自己实现一个简易日志 2.1.日志的等级 2.2日志的格式 2.3.获取时间的方法 2.4.日志的主体实现 参数: 代码解析: 问题&#xff1a…

C++新手入门指南:从基础概念到实践之路

C 继承了 C 语言的高效性和灵活性,同时新增了面向对象编程的特点。这使得 C 既可以进行底层系统编程,又能进行面向对象的软件设计。在面向对象编程方面,C 支持封装、继承和多态三大特性。 💯C 初印象 语言的发展就像是练功打怪…

用Java爬虫API,轻松获取电商商品SKU信息

在电子商务的精细化运营时代,SKU信息的重要性不言而喻。SKU(Stock Keeping Unit)信息不仅包含了商品的规格、价格、库存等关键数据,还直接影响到库存管理、价格策略和市场分析等多个方面。如何高效、准确地获取这些信息&#xff0…

STM32—SPI通信外设

1.SPI外设简介 STM32内部集成了硬件SPI收发电路,可以由硬件自动执行时钟生成、数据收发等功能,减轻CPU的负担可配置8位/16位数据帧、高位先行/低位先行时钟频率:fpclk/(2,4,8,16,32,64,128,256)支持多主机模型、主或从操作可精简为半双工/单…

【GESP】C++一级练习BCQM3049,细胞分裂

GESP一级知识点整形int和for循环练习。 题目题解详见:【GESP】C一级练习BCQM3049,细胞分裂 | OneCoder 【GESP】C一级练习BCQM3049,细胞分裂 | OneCoderGESP一级知识点整形int和for循环练习。https://www.coderli.com/gesp-1-bcqm3049/ C …

微服务--Ribbon负载均衡器

Nacos 本身里面就内置了Rabbion, 所以 不需要额外添加 添加LoadBalanced注解: Rabbion 内置的有好几种 负载均衡器 可以根据业务去选择,我们一般不会额外配置 都是默认的轮询,因为我们是基于docker发布的 大家的资源都是平等的 若…

Vue.js + Element UI 实现多方式登录功能(账号/手机号验证码登录)

引言 在现代Web应用中,提供多种登录方式已成为一种标准做法,这不仅能提升用户体验,还能满足不同用户的需求。本文将详细介绍如何使用Vue.js框架结合Element UI组件库,实现一个包含账号登录和手机号验证码登录两种方式的登录页面。…

Leetcode 单词规律

即判断给定的模式字符串(pattern)和单词字符串(s)是否遵循相同的对应规则。具体来说,就是要判断 pattern 中的字符与 s 中的单词是否存在一一对应的关系,即双射(bijection)。 算法思…