异步处理(前端面试)

Promise

1:使用promise原因

了解回调地狱【什么是回调地狱】
1:回调地狱是异步获取结果后,为下一个异步函数提供参数,层层回调嵌入回调
2:导致回调层次很深,代码维护特别困难
3:在没有ES6时,是将每一个request【网络请求】封装成一个函数将结果进行返回
promise解决问题
1:promise解决异步方法,本质上是一个构造函数,可以用它来实例化一个对象
2:对象身上有resolve,reject,all原型上有then,catch方法
3:promise对象有三种状态:(1)pending(初始化状态|进行中)(2)resolved|fulfilled(成功状态)(3)rejected(失败)
promise三种状态
(1)pending它的意思是 “待定的,将发生的”,相当于是一个初始状态。创建Promise对象时,且没有调用resolve或者是reject方法,相当于是初始状态。这个初始状态会随着你调用resolve,或者是reject函数而切换到另一种状态。
(2)resolved表示解决了,就是说这个承诺实现了。 要实现从pending到resolved的转变,需要在 创建Promise对象时,在函数体中调用了resolve方法 。
(3)rejected拒绝,失败。表示这个承诺没有做到,失败了。要实现从pending到rejected的转换,只需要在创建Promise对象时,调用reject函数。

2:代码

//promise链式调用
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)
}) 
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)}})})
} 

async | await异步处理同步化

1:使用概念

1:async|await是成对出现
2:只使用await而函数中没有使用async命令,会出现报错
3:直接使用async命令,没有使用await,返回的函数是一个promise【没有实际意义】
4:async修饰函数,await是添加在调用函数的部分前该命令的含义是:得等这一行异步方法执行成功后,将返回值赋值给res变量,才可以走下一行代码
5:将原来的异步编程改为同步编程【异步处理同步化】

2:代码

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)
} 

3:同步与异步

同步
1:js代码实际上是单线程程序,代码按顺序一行一行执行
2:如果在同步编程中发送网络请求【请求超时】,下面代码依赖网络请求,那么整个网页会失去响应
异步
1:一个异步过程的执行不在于原有的序列顺序有关
2:发送网络请求【不确定响应时间,异步是最优选】,程序不在此等待,直接走下面代码,等异步请求有响应,自主完成回调后续操作,程序之间互不影响ps(1)同步按顺序执行,异步不按顺序执行,异步执行效率高(2)如果涉及到网络请求没有依赖关系的话,异步请求是效率最高的,但是下一个的方法依赖于上一个网络请求的结果,那么久必须使用await命令,将异步结果等待返回之后再执行后面的代码。

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

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

相关文章

3种XSS攻击简单案例

1、接收cookie端攻击机上用python写个接收web程序flask from flask import Flask, request, Responseapp Flask(__name__)app.route(/) def save_cookie():cookie request.args.get(cookie, )if cookie:with open(/root/cookies.txt, a) as f:f.write(f"{cookie}\n"…

Docker 部署生产环境可用的 MySQL 主从架构

简介跨云服务器一主一从,可以自己按照逻辑配置多个从服务器 假设主服务器ip: 192.168.0.4 从服务器ip:192.168.0.5 系统 CentOS7.9 (停止维护了,建议大家用 Ubuntu 之类的,我这个没办法,前人在云服务器上…

DeepResearch(上)

概述 OpenAI首先推出Deep Research Agent,深度研究智能体,简称DRA。 通过自主编排多步骤网络探索、定向检索和高阶综合,可将大量在线信息转换为分析师级别的、引用丰富的报告,将数小时的手动桌面研究压缩为几分钟。 作为新一代…

附050.Kubernetes Karmada Helm部署联邦及使用

文章目录karmada简介karmada概述karmada Helm部署Kubernetes karmada介绍基础准备Kubernetes集群获取chat包正式部署karmada使用karmada纳管集群查看memeber集群导出kubeconfig切换集群测试应用karmada简介 karmada概述 参考:附049.Kubernetes Karmada Local-up部…

必知必会:基于Transformer 的预训练语言模型如何区分文本位置(sinusoidal位置编码、原理和详细推导)

预训练位置编码 基于Transformer 的预训练语言模型如何区分文本位置? 基于 Transformer 的预训练语言模型主要通过位置编码来区分文本位置。Transformer 核心的自注意力机制本身并不考虑词的顺序,它对输入序列的处理是与位置无关的。在 query 和 key 的矩阵乘法之后…

redis key过期后会立马删除吗

Redis 的 Key 过期后不会立即被删除。Redis 采用了一种结合 ​惰性删除 (Lazy Expiration)​​ 和 ​定期删除 (Periodic Expiration)​​ 的策略来管理过期 Key 的回收,这是为了在内存管理、性能和 CPU 开销之间取得平衡。📌 Redis 过期 Key 删除的两种…

关于 React 19 的四种组件通信方法

注意:使用的是UI库是 antd-mobile1.父子级组件通信父组件单向数据流:数据从父组件流向子组件。支持多种数据类型:字符串、数字、对象、数组、函数等。只读性:子组件不能直接修改 props 中的数据。import { useState } from react …

OC-单例模式

文章目录单例模式定义特点使用原因缺点模式介绍懒汉模式同步锁实现dispatch_once饿汉模式实现总结懒汉模式优点缺点饿汉模式优点缺点单例模式 定义 单例模式,简单的说就是一个类始终只对应同一个对象,每次获取这个类的对象获得的都是同一个实例 如果一…

[论文阅读] 算法 | 抗量子+紧凑!SM3-OTS:基于国产哈希算法的一次签名新方案

抗量子紧凑!SM3-OTS:基于国产哈希算法的一次签名新方案 论文信息信息类别具体内容论文原标题SM3-OTS: 基于国密算法SM3的紧凑型后量子一次签名方案主要作者杨亚涛、殷方锐、陈亮宇、潘登研究机构1. 北京电子科技学院 电子与通信工程系(北京 1…

C语言-指针用法概述

目录 1.指针基础概念 2. 指针与数组 3. 指针作为函数参数 4. 动态内存分配 5. 指针的高级用法 6. 常见错误与注意事项 7. 指针数组 vs. 数组指针 8.总结与建议 本文主要作为指针用法的复习,会对指针的大致用法进行举例和概述。 1.指针基础概念 ​什…

Java调用Whisper和Vosk语音识别(ASR)模型,实现高效实时语音识别(附源码)

简介 语音识别(Automatic Speech Recognition, ASR)是将人类的语音信号自动转换为对应文字的技术,它使计算机能够“听懂”人说的话,是人机语音交互的核心技术,广泛应用于智能助手、语音输入、客服系统等场景。 现在我…

第3周 机器学习课堂记录

1.学习问题的分类有监督的学习分类回归无监督学习聚类密度估计:确定输入空间中的数据的分布可视化:把高位空间中的数据投影到二维或三维空间强化学习不给定最优输出的示例,而是通过试错发现最优输出2.泛化versus过度拟合背景引入:…

消息队列(MQ)高级特性深度剖析:详解RabbitMQ与Kafka

一、引言:为什么需要关注高级特性? 在现代分布式系统架构中,消息队列(Message Queue)已成为不可或缺的核心组件。初级使用消息队列可能只需几行代码就能实现基本功能,但要真正发挥其在大规模生产环境中的威…

【GPT入门】第65课 vllm指定其他卡运行的方法,解决单卡CUDA不足的问题

【GPT入门】第65课 vllm指定其他卡运行的方法,解决单卡CUDA不足的问题1.原理说明:2.实践1.原理 要将 vllm 部署在第二张 GPU 卡上(设备编号为 1),只需在命令前添加 CUDA_VISIBLE_DE…

Spring Boot Actuator自定义指标与监控实践指南

Spring Boot Actuator自定义指标与监控实践指南 本篇文章以生产环境实战经验为主线,结合某电商系统的业务场景,讲解如何在Spring Boot Actuator中添加并暴露自定义指标,并使用Prometheus和Grafana进行完整的监控与告警配置。 一、业务场景描述…

Vue报错<template v-for=“option in cardOptions“ :key=“option.value“>

在Vue项目中遇到报错&#xff0c;原因是模板中使用了<template>标签内的v-for指令&#xff0c;而当前Vue版本不支持此用法。解决方案是移除<template>标签&#xff0c;直接在<el-option>上使用v-for。同时优化计算属性cardOptions&#xff0c;使其能够兼容历…

人工智能学习:Transformer结构中的规范化层(层归一化)

Transformer结构中的规范化层(层归一化) 一、规范化层(层归一化)介绍 概念 层归一化(Layer Normalization) 是一种用于提高深度神经网络训练稳定性和加速收敛的技术,广泛应用于现代深度学习模型中,尤其是在Transformer等序列建模网络中。它通过对每一层的输出进行归一化…

盼之代售 最新版 decode__1174

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 逆向分析 部分python代码 cp1 execj…

Transformer系列 | Pytorch复现Transformer

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、Transformer和Seq2Seq 在之前的博客中我们学习了Seq2Seq(深度学习系列 | Seq2Seq端到端翻译模型)&#xff0c;知晓了Attention为RNN带来的优点。那么有没有…

【MySQL】常用SQL语句

介绍常用的DDL语句、DML语句基本语法分号结尾使用空格和缩进不区分大小写--或#注释单行内容 /*注释多行内容*/DDL数据定义语句&#xff1a;定义数据库、表、字段一、操作库-- 创建库create database db1;-- 创建库是否存在&#xff0c;不存在则创建create database if not exi…