当前位置： 首页 > news >正文

async和await

news 2025/12/18 10:02:49


一，基本使用
其实就是之前学过的异步函数，异步编程在函数前写一个ansyc，就转化为异步函数，返回的是一个promise对象，于是就可以使用await关键字，可以把异步函数写成同步函数的形式，极大地提高代码的可读性。

原本的：

           axios.get('adata',{
               params:{
                   id:123,
                   name:'zhangsan'
               }
           }).then(function(ret){
               console.log(ret)
           })

现在：

//利用ansyc和await编写
            async function queryData(){
                var ret=await axios.get('adata',{
                    params:{
                        id:12,
                        name:'lisi'
                    }
                })
                //直接利用axios.get('地址')，通过await取得服务器的响应，并赋值给ret
                console.log(ret)
                //因为响应拦截器已经处理成ret.data了，所以这里会直接得到服务器响应的信息
            }
            queryData()

整体代码：

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="js/axios.js"></script>
        <script type="text/javascript">
            axios.defaults.baseURL='http://localhost:3000/'
            
            //axios请求拦截器
            axios.interceptors.request.use(function(config){
                config.headers.mytoken='nihao'
                return config
            },function(err){
                console.log(err)
            })

            //axios响应拦截器
            axios.interceptors.response.use(function(res){
                //console.log(res)//这里获取到的res就是之前认知中的res,是把服务器传回来的数据一起包裹在一个对象res里面的。
                //而真正的服务器传过来的数据是res.data
                //所以说，响应拦截器的作用就是拦截服务器的响应的东西，拦截之后，再将数据处理后交给客户端
                //比如说，我们想让客户端直接获取服务器传过来的信息时。
                var data=res.data
                return data
            },function(err){
                console.log(err)
            })
            
            
            //利用ansyc和await编写
            async function queryData(){
                var ret=await axios.get('adata',{
                    params:{
                        id:12,
                        name:'lisi'
                    }
                })
                //直接利用axios.get('地址')，通过await取得服务器的响应，并赋值给ret
                console.log(ret)
                //因为响应拦截器已经处理成ret.data了，所以这里会直接得到服务器响应的信息
            }
            queryData()
            
            
            
           // axios.get('adata',{
              //  params:{
                 //   id:123,
                 //   name:'zhangsan'
              //  }
           // }).then(function(ret){
              //  console.log(ret)
           // })
        </script>
    </body>
</html>

-------------------------------------------------------------------------------

用try {} catch() {},配合async 和await ，await后面可以接对应的方法（该方法必须返回一个promise对象，方法必须包含async和await）

async doSave () {

      let param = this.$props.currentLog // 当前待办数据

      let config = {

        'pivCompetenceAppraiseInstanceId': this.currentMemberInfodata.pivCompetenceAppraiseInstanceId,

        'pivCompetenceScoreConfirmDetailList': this.tableData3,

        'pivSchemeCompetenceId': param ? param.pivSchemeCompetenceId : this.currentIndexRowData.pivSchemeCompetenceId,

        'pivSchemeCompetenceTemplateId': param ? param.pivSchemeCompetenceTemplateId : this.currentIndexRowData.pivSchemeCompetenceTemplateId

      }

      try {

        let res = await Api.getEdit(config)

        this.$message.success(res.data)

        await this.editRow(this.currentRowdata) // 等刷新当前数据后再赋值,editRow 方法必须加上async 和await

        // 保留之前输入的备注，不被清空

        this.pivAnonymousAccountRows.map(v1 => {

          this.tableDataRowData.map(v2 => {

            if (v1.id === v2.id) {

              v1.remark = v2.remark

            }

          })

        })

      } catch (err) {

        this.$message.error(err.message)

      }

    },

async editRow (row) {

      this.templateEvaluationMode = row.templateEvaluationMode

      this.currentRowdata = row

      // this.columnDesc = 0

      const me = this

      me.modelTitle = '绩效考核打分-' + row.competenceName

      me.formData = row

      if (row.templateEvaluationMode === 3) {

        me.addModalQuality = false

        me.$nextTick(() => {

          me.addModalQuality = true // 素质评议模板弹框

        })

      } else if (row.templateEvaluationMode === 1 || row.templateEvaluationMode === 2) {

        me.addModal = true

      } else if (row.templateEvaluationMode === 4 || row.templateEvaluationMode === 5) {

        this.isShowTargetTask = true

      }

      if (row.stateName === '打分完成') {

        this.stateFlag = false

        this.commitFlag = true

      } else {

        this.stateFlag = true

        this.commitFlag = false

      }

      let config = {

        pivSchemeCompetenceId: row.pivSchemeCompetenceId,

        pivSchemeCompetenceTemplateId: row.pivSchemeCompetenceTemplateId

      }

      await Api.getDetail(config)

        .then((res) => {

          this.isPostShowed = res.data.isPostShowed

          if (row.templateEvaluationMode === 3) {

            this.headerQuality = []

            this.tableDataQuality = res.data.tableContents

            this.headerQuality = res.data.header

            // this.$nextTick(() => {

            //   this.getQualityScore()

            // })

          } else if (row.templateEvaluationMode === 1 || row.templateEvaluationMode === 2) {

            this.pivAnonymousAccountRows = res.data.tableContents

          } else if (row.templateEvaluationMode === 4 || row.templateEvaluationMode === 5) {

            this.tableDataQuality = res.data.tableContents.appraiserContent

            this.targetState = this.tableDataQuality[0].state

            this.memberHeader = res.data.header.memberHeader

            this.memberContentData = res.data.tableContents.memberContent

            this.memberContent = this.memberContentData[0]

            if (row.templateEvaluationMode === 4) {

              this.appraiserHeader = res.data.header.appraiserHeader

            }

          }

          this.getAllScoreOne()

        })

        .catch((err) => {

          if (err.message) {

            this.$message.error(err.message)

          }

        })

    },

 

相关文章：

async和await

一&#xff0c;基本使用 其实就是之前学过的异步函数&#xff0c;异步编程在函数前写一个ansyc&#xff0c;就转化为异步函数&#xff0c;返回的是一个promise对象&#xff0c;于是就可以使用await关键字&#xff0c;可以把异步函数写成同步函数的形式&#xff0c;极大地提高代…...

编程日记 2023/8/19 1:05:29

如何从cpu改为gpu，pytorch，cuda

1.cmd输入nvcc -V 2.得到 cuda版本后&#xff0c;去pytorch官网 3.根据自己的cuda进行选择 4.复制上述链接&#xff0c;进入cmd 5.cmd中输入activate XXX,这里的"XXX"指代自己在工程中用到的环境 6.进入后&#xff0c;将刚才链接粘贴&#xff0c;回车等待下载结束 …...

编程日记 2023/8/19 1:04:28

JavaScript简介--语句--变量

目录 JavaScript简介 为什么学习 JavaScript JavaScript与ECMAScript的关系 JavaScript版本 JavaScript语句、标识符 语句 标识符 JavaScript保留关键字 变量 变量的命名规则 数据类型 变量的重新赋值 变量提升 运算符 条件语句 循环语句 JavaScript简介 JavaScri…...

编程日记 2023/8/19 1:03:26

Windows CMD 关闭，启动程序

Windows CMD 关闭&#xff0c;启动程序 1. Windows 通过 CMD 命令行关闭程序 示例&#xff1a;通过 taskkill 命令关闭 QQ 管家&#xff0c;但是这里有个问题&#xff0c;使用命令行关闭 QQ 管家时&#xff0c;会提示“错误: 无法终止 PID 1400 (属于 PID 22116 子进程)的进程…...

编程日记 2023/8/19 1:02:21

统计XML标注文件中各标注类别的标签数量

目标检测任务重&#xff0c;担心数据集中各标签类别不均衡&#xff0c;想统计XML标注文件中各标注类别的标签数量&#xff0c;可以使用以下脚本&#xff1a; import os import glob import xml.etree.ElementTree as etdef count_labels(source_dir):file_list glob.glob(os.…...

编程日记 2023/8/19 1:01:19

一百六十、Kettle——Linux上安装的Kettle9.2.0连接Hive3.1.2

一、目标 Kettle9.2.0在Linux上安装好后&#xff0c;需要与Hive3.1.2数据库建立连接 之前已经在本地上用kettle9.2.0连上Hive3.1.2 二、各工具版本 &#xff08;一&#xff09;kettle9.2.0 kettle9.2.0安装包网盘链接 链接&#xff1a;https://pan.baidu.com/s/15Zq9w…...

编程日记 2023/8/19 1:00:18

C++新经典03--共用体、枚举类型与typedef

共用体 共用体&#xff0c;也叫联合&#xff0c;有时候需要把几种不同类型的变量存放到同一段内存单元&#xff0c;例如&#xff0c;把一个整型变量、一个字符型变量、一个字符数组放在同一个地址开始的内存单元中。这三个变量在内存中占的字节数不同&#xff0c;但它们都从同…...

编程日记 2023/8/19 0:59:16

HCIP-OpenStack组件介绍

openstack把这些组件服务都集成到httpd服务中了&#xff0c;目的是为了提升性能。登入不了openstack在控制节点查下httpd服务&#xff0c;systemctl status httpd Horizon&#xff1a;提供webUI图形化界面的 Keystone&#xff1a;提供身份认证服务、授权、endpoint端点&#xf…...

编程日记 2023/8/19 0:58:15

2682. 找出转圈游戏输家

题目描述&#xff1a; n 个朋友在玩游戏。这些朋友坐成一个圈&#xff0c;按 顺时针方向 从 1 到 n 编号。从第 i 个朋友的位置开始顺时针移动 1 步会到达第 (i 1) 个朋友的位置&#xff08;1 < i < n&#xff09;&#xff0c;而从第 n 个朋友的位置开始顺时针移动 1 步…...

编程日记 2023/8/19 0:57:14

RESTAPI简介与DRF使用

RESTAPI 以资源为url&#xff0c;通过不同的请求方式实现不同的行为。 以资源名作为url POST:增 …/student/ GET&#xff1a;查所有 …/student/ GET&#xff1a;查单个 …/student/<pk>/ 获取idpk的学生 DELETE&#xff1a;删 …/student/<pk>/ PUT&#…...

编程日记 2023/8/19 0:56:10

深度学习笔记（kaggle课程《Intro to Deep Learning》）

一、什么是深度学习&#xff1f; 深度学习是一种机器学习方法&#xff0c;通过构建和训练深层神经网络来处理和理解数据。它模仿人脑神经系统的工作方式&#xff0c;通过多层次的神经网络结构来学习和提取数据的特征。深度学习在图像识别、语音识别、自然语言处理等领域取得了…...

编程日记 2023/8/19 0:55:08

windows下载任意版本php

zz​​​​​​​windows.php.net - /downloads/releases/archives/ windows下载php&#xff0c;记录一下...

编程日记 2023/8/19 0:54:07

Linux命令

操作系统管理硬件设备&#xff0c;并为用户和应用程序提供一个简单的接口&#xff0c;以便于使用。&#xff08;作为中间人&#xff0c;连接软件和硬件&#xff09;不同应用领域的主流操作系统 桌面操作系统 Windows系列:&#xff1a;用户群体大 macOS&#xff1a;适合于开发人…...

编程日记 2023/8/19 0:53:06

TDD（测试驱动开发）？

01、前言 很早之前&#xff0c;曾在网络上见到过 TDD 这 3 个大写的英文字母&#xff0c;它是 Test Driven Development 这三个单词的缩写&#xff0c;也就是“测试驱动开发”的意思——听起来很不错的一种理念。 其理念主要是确保两件事&#xff1a; 确保所有的需求都能被照…...

编程日记 2023/8/19 0:52:04

C/C++

const 作用 修饰变量&#xff0c;说明该变量不可以被改变&#xff1b;修饰指针&#xff0c;分为指向常量的指针&#xff08;pointer to const&#xff09;和自身是常量的指针&#xff08;常量指针&#xff0c;const pointer&#xff09;&#xff1b;修饰引用&#xff0c;指向…...

编程日记 2023/8/19 0:51:02

CCF C³ 走进百度：大模型与可持续生态发展

2023年8月10日&#xff0c;由CCF CTO Club发起的第22期C活动在百度北京总部进行&#xff0c;以“AI大语言模型技术与生态发展”主题&#xff0c;50余位企业界、学界专家、研究人员就此进行深入探讨。 CCF C走进百度 本次活动&#xff0c;CCF秘书长唐卫清与百度集团副总裁、深…...

编程日记 2023/8/19 0:49:59

Vue使用html2canvas将DOM节点生成对应的PDF

要通过Vue使用html2canvas将DOM节点生成对应的PDF&#xff0c;您需要安装html2canvas和jspdf这两个库。html2canvas用于将DOM节点转换为Canvas&#xff0c;而jspdf用于将Canvas转换为PDF。以下是一个简单的示例代码&#xff0c;展示了如何使用html2canvas和jspdf生成PDF文件&am…...

编程日记 2023/8/19 0:48:56

专访阿里云席明贤，视频云如何运用大模型与小模型来破茧升级2.0

不久前&#xff0c;LiveVideoStack与阿里云视频云负责人席明贤&#xff08;花名右贤&#xff09;展开一场深度的对话&#xff0c;一个是圈内专业的社区媒体&#xff0c;一个是20年的IT老兵&#xff0c;双方有交集、有碰撞、有火花。 面对风云变幻的内外环境&#xff0c;阿里云…...

编程日记 2023/8/19 0:47:55

Vue 2的计算属性与侦听器

计算属性 vs 方法 vs 侦听器 计算属性的出现是为了解决模板内表达式太过复杂而变得难以维护。 假设我们知道长和宽&#xff0c;要计算一个矩形的面积&#xff0c;如果没有计算属性&#xff0c;我们可能像下面这样处理&#xff1a; <div id"app"><input t…...

编程日记 2023/8/19 0:46:52

JavaScript基础：学习JavaScript语言的基本语法和常用操作，了解网页交互的基本原理

JavaScript是一种广泛应用于网页开发中的脚本语言&#xff0c;它可以与HTML和CSS一起使用&#xff0c;实现网页交互及动态效果。 以下是JavaScript的基本语法和常用操作&#xff1a; 变量声明&#xff1a;使用var、let或const关键字声明变量。 var name "John";let …...

编程日记 2023/8/19 0:45:51

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/12/9 1:55:05

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/12/13 7:52:38

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/12/17 0:14:52

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/12/7 12:35:20

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/12/16 21:53:05

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/12/9 14:35:12

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/12/13 4:39:40

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45