JavaScript Promise与async/await

Promise与async/await

  • 为什么要使用他们
  • 如何使用.then() 和.catch()
  • 如何将相同的代码转换成sync和Await关键字

为什么要使用他们

前面学习了JavaScript的简单类型(例如 数字和字符串),我们的代码会按顺序从上往下执行

console.log(1111);
console.log(2222);
console.log(3333);

在这里插入图片描述

但是在实际项目中,我们经常执行长时间的任务,例如: 调用数据库打开文件 、远程调用api 进行交互等、订阅消息 通常不会立刻返回结果。很多是返回一个Promise(承诺)

Promise 是javaScript中一个特殊类型对象,代表异步操作的最终完成或失败

node项目内添加axios模块

npm i  --save axios

index.js里添加下面,我们用axios 调用get方法

const axiosRequest = require('axios')let  response = axiosRequest.get("https://XXXX/prod-api/captchaImage");console.log(response.data);

命令行运行js,执行报错

node index.js

在这里插入图片描述

因为响应对象不是我们期望的,修改控制台输出命令,直接输出response

在这里插入图片描述

如何使用.then() 和.catch()

javaScript提供了两个方法
在这里插入图片描述
在Promise对象上使用一些特殊方法,当任务完成时,

该函数将在 promise resolved 且接收到结果后执行

promise.then(function(result) { /* handle a successful result */ },function(error) { /* handle an error */ }
);

.then 的第一个参数是一个函数,该函数将在 promise resolved 且接收到结果后执行。

.then 的第二个参数也是一个函数,该函数将在 promise rejected 且接收到 error 信息后执行。

在这里插入图片描述

 const axiosRequest = require('axios')axiosRequest
.get("https://XXXX/prod-api/captchaImage") 
.then(response => {console.log(`you could  ${response.data.img}`)})
.catch(error =>{console.error(`ERROR ${error}`);});

如何将相同的代码转换成sync和Await关键字

await 允许我们等到 Promise 完成后再转下一行,更加整洁且易于阅读,javaScript要求我们的await关键字 在标有sync关键字函数内使用,所以让我们带有sync关键字标记的函数代替我们Promise 链

 const axiosRequest = require('axios')async function getMsg(){let response = await axiosRequest.get("https://XXXX/prod-api/captchaImage1")console.log(`you could  ${response.data.msg}`);    }getMsg();

如何捕获异常


const axiosRequest = require('axios')axiosRequest
.get("https://XXXX/prod-api/captchaImage1").then(response => {console.log(`you could  ${response.data.img}`)}).catch(error =>{console.error(`ERROR ${error}`);});

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

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

相关文章

并发编程之ConcurrentHashMap源码分析

1. 主源码逻辑 final V putVal(K key, V value, boolean onlyIfAbsent) {if (key null || value null) throw new NullPointerException();// 1.计算key对应的hashint hash spread(key.hashCode());int binCount 0;// 2. 进行自旋 for (Node<K,V>[] tab table;;) {N…

Win11启用HyperV

Win11启用HyperV 编辑一个txt&#xff0c;输入下面的指令 pushd "%~dp0"dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txtfor /f %%i in (findstr /i . hyper-v.txt 2^>nul) do dism /online /norestart /add-package:"%SystemRoot%…

PLC中连接外部现场设备和CPU的桥梁——输入/输出(I/O)模块

输入&#xff08;Input&#xff09;模块和输出&#xff08;Output&#xff09;模块简称为I/O模块&#xff0c;数字量&#xff08;Digital&#xff0c;又称为开关量&#xff09;输入模块和数字量输出模块简称为DI模块和DQ模块&#xff0c;模拟量&#xff08;Analog&#xff09;输…

第3章 数据

第3章 数据 学习笔记书后练习问题3问题7问题10问题11问题21 学习笔记 value value - 0; 通常用于将字符转换为其对应的整数值enum Jar_Type { CUP, PINT, QUART, HALF_GALLON, GALLON }; 这些符号名的实际值都是整型值&#xff0c;例如&#xff0c;CUP 是0&#xff0c;PINT …

Android安卓写入WIFI热点自动连接NDEF标签

本示例使用的发卡器&#xff1a;Android Linux RFID读写器NFC发卡器WEB可编程NDEF文本/网址/海报-淘宝网 (taobao.com) package com.usbreadertest;import android.os.Bundle; import android.view.MenuItem; import android.view.View; import android.widget.EditText; impo…

JAVA算法训练营打卡总结

目录 初心 目标 挑战 总结 初心 过完年后&#xff0c;突然发现自毕业后到现在已经工作将近两年&#xff0c;在这段时间中除了工作和备考软考外&#xff0c;也就是算法偶尔的刷几道&#xff0c;其它没有什么实际上的提升。 抱着现在的时间不去提升那以后就更没时间提升的心…

LabVIEW频谱感知实验平台

LabVIEW频谱感知实验平台 在当前的通信网络中&#xff0c;频谱资源的高效利用成为了研究和实践的重要方向之一。随着无线通信技术的快速发展&#xff0c;传统的固定频谱分配策略已无法满足日益增长的通信需求&#xff0c;因此&#xff0c;频谱感知技术作为认知无线电的核心组成…

Zed 捕获图像+测距

Zed 捕获图像测距 1. 导入相关库2. 相机初始化设置3. 获取中心点深度数据4. 计算中心点深度值5. 完整代码5. 实验效果 此代码基于官方代码基础上进行改写&#xff0c;主要是获取zed相机深度画面中心点的深度值&#xff0c;为yolo测距打基础。 1. 导入相关库 import pyzed.sl …

iview中基于upload源代码组件封装更为完善的上传组件

业务背景 最近接了一个用iview为基础搭建的vue项目&#xff0c;在开需求研讨会议的时候&#xff0c;我个人提了一个柑橘很合理且很常规的建议&#xff0c;upload上传文件支持同时上传多个并且可限制数量。当时想的是这不应该很正常吗&#xff0c;但是尴尬的是&#xff1a;只有…

【Proteus】蜂鸣器播放音乐

按键按一次&#xff0c;蜂鸣器响一次 &#xff0c;LCD1602同步。 #include <REGX52.H> #include <INTRINS.H>unsigned int keynum; sbit RSP3^0; //** sbit RWP3^1; //** sbit EP3^2; //** sbit buzzerP1^5; void delay(unsigned int n)//1ms {unsigned char a,…

SpringMVC接收参数方式讲解

PathVariable 该注解用于接收具有Restful风格的参数&#xff0c;如/api/v1/1001&#xff0c;最终userId的值为1001。 如下代码中&#xff0c;使用name属性可以指定GetMapping中的id名称与之对应&#xff0c;从而可以自定义参数名称userId&#xff0c;而不是使用默认名称id G…

虹科Pico汽车示波器 | 免拆诊断案例 | 2016款保时捷911 GT3 RS车发动机异响

一、故障现象 一辆2016款保时捷911 GT3 RS车&#xff0c;搭载4.0 L水平对置发动机&#xff08;型号为MA176&#xff09;&#xff0c;累计行驶里程约为4.2万km。车主反映&#xff0c;1星期前上过赛道&#xff0c;现在发动机有“哒哒”异响。 二、故障诊断 接车后试车&#xff…

51.基于SpringBoot + Vue实现的前后端分离-校园志愿者管理系统(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;采用SpringBoot Vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SpringBoot Vue技术的校园志愿者管理系统设计与实现管理工…

正则表达式中 “$” 并不是表示 “字符串结束”

△△请给“Python猫”加星标 &#xff0c;以免错过文章推送 作者&#xff1a;Seth Larson 译者&#xff1a;豌豆花下猫Python猫 英文&#xff1a;Regex character “$” doesnt mean “end-of-string” 转载请保留作者及译者信息&#xff01; 这篇文章写一写我最近在用 Python …

C++ 内存分区管理

一、栈区&#xff08;Stack&#xff09; 栈区用来存储函数的参数值、局部变量的值等数据。栈区是自动分配和释放的&#xff0c;函数执行时会在栈区分配空间&#xff0c;函数执行结束时会自动释放这些空间。栈区的数据是连续分配的&#xff0c;由系统自动管理。 注意事项&…

普通人赚钱途径大盘点:从搬砖到玩转智慧,财富之路任你探索

在生活的大舞台上&#xff0c;每个人都在以自己的方式演绎着赚钱的故事。作为普通人&#xff0c;我们或许没有显赫的财富背景&#xff0c;但赚钱的途径却是多种多样&#xff0c;等待我们去发掘。今天&#xff0c;就让我来为大家盘点一下普通人赚钱的常见途径&#xff0c;看看哪…

P2483 【模板】k 短路 / [SDOI2010] 魔法猪学院

题目&#xff1a; 题目背景 注&#xff1a;对于 kk 短路问题&#xff0c;A* 算法的最坏时间复杂度是 O(nk \log n)O(nklogn) 的。虽然 A* 算法可以通过本题原版数据&#xff0c;但可以构造数据&#xff0c;使得 A* 算法在原题的数据范围内无法通过。事实上&#xff0c;存在使用…

部署ELFK+zookeeper+kafka架构

目录 前言 一、环境部署 二、部署ELFK 1、ELFK ElasticSearch 集群部署 1.1 配置本地hosts文件 1.2 安装 elasticsearch-rpm 包并加载系统服务 1.3 修改 elasticsearch 主配置文件 1.4 创建数据存放路径并授权 1.5 启动elasticsearch是否成功开启 1.6 查看节点信息 …

蓝桥杯2023年第十四届省赛真题-冶炼金属

思路&#xff1a;用二分模板&#xff0c;边界r得包含所有的v&#xff0c;check分为小于&#xff0c;大于&#xff0c;等于三种情况。 #include<bits/stdc.h> using namespace std; #define int long long #define endl \n int n; const int N 1e410; int a[N],b[N];int…

【Conda基础命令】使用conda创建、查看、删除虚拟环境及可能的报错处理

文章目录 前言&#xff08;1&#xff09; 在默认路径下创建一个新的虚拟环境&#xff08;2&#xff09; 查看已有的虚拟环境&#xff08;3&#xff09; 删除已有的虚拟环境&#xff08;谨慎操作&#xff09;&#xff08;4&#xff09;激活虚拟环境&#xff08;5&#xff09;退出…