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

async和await

news 2026/3/27 1:39:37


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

Java+AI：让技术概念落地为企业真实业务价值

在大模型技术普及的当下&#xff0c;不少Java技术栈企业完成了大模型的基础接入&#xff0c;但却陷入了“技术空转”的困境——仅实现了简单的API调用&#xff0c;却未能将AI能力与业务流程深度融合&#xff0c;最终让技术探索停留在概念层面。真正的AI价值&#xff0c;从来不是…...

编程新知 2026/3/27 1:38:22

为什么你的Flask农业API总在灌溉高峰期崩？Python高并发部署的4层熔断架构设计（实测QPS提升6.8倍）

第一章&#xff1a;为什么你的Flask农业API总在灌溉高峰期崩&#xff1f;Python高并发部署的4层熔断架构设计&#xff08;实测QPS提升6.8倍&#xff09; 当全省智能灌溉系统在每日清晨5:00–7:00集中调度水阀、上传土壤墒情数据时&#xff0c;基于默认配置的Flask API常出现进程…...

编程新知 2026/3/27 1:30:20

【超全】基于Springboot多维分类的知识管理系统【包括源码+文档＋调试】

&#x1f495;&#x1f495;发布人&#xff1a; 码上青云 &#x1f495;&#x1f495;各类成品Java毕设 。javaweb&#xff0c;ssm&#xff0c;springboot等项目&#xff0c;欢迎咨询。 &#x1f495;&#x1f495;程序开发、技术解答、代码讲解、文档&#xff0c; &#x1f31…...

编程新知 2026/3/27 0:23:27

Win11Debloat：Windows系统轻量优化解决方案

Win11Debloat&#xff1a;Windows系统轻量优化解决方案 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改以简化和改善你的Win…...

编程新知 2026/3/27 0:15:27

36 Python 时序和文本：中文文本处理入门：为什么要先做分词和停用词过滤？

中文文本处理入门&#xff1a;为什么要先做分词和停用词过滤&#xff1f; 刚接触文本分析时&#xff0c;很多人都会有一个疑问&#xff1a; 文本明明已经有内容了&#xff0c;为什么不能直接拿去做分类、聚类或者情感分析&#xff1f; 这个问题其实正好指向了文本挖掘里最基础、…...

编程新知 2026/3/27 0:09:21

云效流水线实战：从零部署Java应用到阿里云ECS（含完整脚本）

云效流水线实战&#xff1a;从零部署Java应用到阿里云ECS&#xff08;含完整脚本&#xff09; 在当今快节奏的软件开发环境中&#xff0c;自动化部署已成为提升团队效率的关键环节。阿里云云效平台提供的流水线功能&#xff0c;为开发者提供了一套完整的CI/CD解决方案&#xff…...

编程新知 2026/3/27 0:09:19

springboot网络小说在线阅读网站的设计与实现

目录需求分析技术选型数据库设计核心功能实现性能优化安全防护测试部署项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析 明确网站的核心功能和用户需求。网络小说在线阅读网站通常需要包含以下功能模块&#xff1a;用户…...

编程新知 2026/3/26 23:37:05

实测2-5分钟：CogVideoX-2b生成速度与画质平衡的真实体验报告

实测2-5分钟&#xff1a;CogVideoX-2b生成速度与画质平衡的真实体验报告 1. 从文字到视频&#xff1a;CogVideoX-2b能做什么&#xff1f; 想象一下&#xff0c;你只需要输入一段文字描述&#xff0c;就能在几分钟内获得一段6秒的高清视频。这不是科幻电影里的场景&#xff0c…...

编程新知 2026/3/26 23:14:54

SDMatte与前端Vue.js结合：打造交互式在线抠图工具

SDMatte与前端Vue.js结合&#xff1a;打造交互式在线抠图工具 1. 引言&#xff1a;让抠图变得简单高效 想象一下这样的场景&#xff1a;电商运营每天需要处理上百张商品图片&#xff0c;设计师反复在Photoshop里手动抠图&#xff0c;自媒体创作者为找不到合适的透明背景素材发…...

编程新知 2026/3/26 21:25:58

给CUDA新手的3DGS代码导读：从forward.cu到backward.cu，一步步拆解渲染流程

给CUDA新手的3DGS代码导读&#xff1a;从forward.cu到backward.cu&#xff0c;一步步拆解渲染流程 第一次看到3D Gaussian Splatting&#xff08;3DGS&#xff09;的CUDA代码时&#xff0c;我盯着那些复杂的核函数和内存操作发了半小时呆。作为从PyTorch转型过来的研究者&#…...

编程新知 2026/3/26 20:59:50