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

async和await

news 2025/9/15 18:07:09


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

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/9/15 5:15:46

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/7/12 9:05:51

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/7/4 0:49:28

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/9/13 17:39:49

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/7/26 23:29:41

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/8/28 22:40:10

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/8/18 12:09:07

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/9/9 10:08:47

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/8/3 15:16:26

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/9/9 10:08:16