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

async和await

news 2026/3/27 0:06:28


一，基本使用
其实就是之前学过的异步函数，异步编程在函数前写一个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

SAP FICO财务账期管理实战：关键配置与月结操作指南

1. SAP FICO财务账期管理基础概念 财务账期管理是SAP FICO模块中最基础也最重要的功能之一。简单来说&#xff0c;它就像财务部门的"门禁系统"&#xff0c;控制着哪些会计凭证能在特定时间段被录入系统。想象一下&#xff0c;如果超市收银台没有营业时间限制&#xf…...

编程新知 2026/3/27 0:03:18

Go-Gin-API跨域处理终极指南：5分钟配置CORS中间件

Go-Gin-API跨域处理终极指南&#xff1a;5分钟配置CORS中间件 【免费下载链接】go-gin-api xinliangnote/go-gin-api 是一个用于快速构建 Go 语言 API 的框架。适合在Go语言开发的Web应用中使用&#xff0c;提供丰富的中间件和模块化架构。特点是提供了简洁的API、自动化API文档…...

编程新知 2026/3/26 23:30:57

终极指南：使用compressorjs实现专业级前端图片压缩与编辑功能

终极指南&#xff1a;使用compressorjs实现专业级前端图片压缩与编辑功能 【免费下载链接】compressorjs compressorjs: 是一个JavaScript图像压缩库&#xff0c;使用浏览器原生的canvas.toBlob API进行图像压缩。 项目地址: https://gitcode.com/gh_mirrors/co/compressorjs…...

编程新知 2026/3/26 22:24:19

League Akari：终极英雄联盟自动化工具集——提升90%游戏效率的完整指南

League Akari&#xff1a;终极英雄联盟自动化工具集——提升90%游戏效率的完整指南 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit …...

编程新知 2026/3/26 21:44:01

机器学习期末考突击指南：从线性回归到SVM的实战解题技巧

机器学习期末考突击指南&#xff1a;从线性回归到SVM的实战解题技巧 期末考试临近&#xff0c;面对机器学习课程中纷繁复杂的算法和公式&#xff0c;许多同学感到无从下手。本文将从实际考题出发&#xff0c;手把手带你攻克线性回归、朴素贝叶斯和SVM三大核心考点&#xff0c;不…...

编程新知 2026/3/26 21:15:52

Cobalt Strike内网渗透：从Beacon生成到多层跳板实战（避坑版）

Cobalt Strike内网渗透实战&#xff1a;Beacon配置与多层跳板避坑指南 在网络安全领域&#xff0c;内网渗透测试往往是最具挑战性的环节之一。面对复杂的企业网络架构&#xff0c;传统的攻击手段常常在多层防火墙和隔离策略面前败下阵来。Cobalt Strike作为一款专业的渗透测试工…...

编程新知 2026/3/26 20:49:49

用Node.js和request-promise玩转EduCoder API：手把手教你搭建自己的实训答案库

用Node.js构建EduCoder实训数据采集系统的工程实践 在编程教育平台EduCoder上&#xff0c;实训关卡的设计往往需要学习者反复尝试和验证。作为开发者&#xff0c;我们能否通过技术手段实现实训数据的自动化采集与管理&#xff1f;本文将深入探讨如何基于Node.js生态构建一个稳定…...

编程新知 2026/3/26 20:35:47

保姆级避坑指南：手把手教你搞定CARLA 0.9.11与Autoware的ROS话题转发（附完整代码）

深度解析CARLA与Autoware联合仿真中的ROS话题转发实战 在自动驾驶仿真开发领域&#xff0c;CARLA与Autoware的联合使用已成为研究热点。许多开发者在尝试将两者结合时&#xff0c;往往会在ROS话题转发环节遇到各种"坑"。本文将聚焦这一关键环节&#xff0c;提供一份详…...

编程新知 2026/3/26 20:19:43

ChatTTS 安装与部署实战：从零搭建到性能调优

最近在做一个语音合成的项目&#xff0c;选型时看中了 ChatTTS&#xff0c;它开源的特性、不错的音质和可控性很吸引人。但在实际动手安装和部署时&#xff0c;发现从个人电脑跑起来到服务器上稳定服务&#xff0c;中间有不少坑。今天就把我这一路从零搭建到性能调优的实战经验…...

编程新知 2026/3/26 20:15:43

如何用ExplorerPatcher解决Windows 11界面不适问题提升工作效率

如何用ExplorerPatcher解决Windows 11界面不适问题提升工作效率 【免费下载链接】ExplorerPatcher 提升Windows操作系统下的工作环境 项目地址: https://gitcode.com/GitHub_Trending/ex/ExplorerPatcher Windows 11带来的界面变革让许多用户感到操作不便&#xff0c;任…...

编程新知 2026/3/26 19:12:50