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

关于axios同步获取数据的问题

axios同步获取数据

  • Axios介绍
  • 问题
    • 代码修改
  • 总结

Axios介绍

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

promise是处理异步调用的对象方法

问题

在axios中,调用是异步的,这就会出现需要的数据不能实时获取,导致程序出错。

在写代码时发现了异步调用出现的一些问题

import axios from 'axios'function getarticle(){return  axios.get('http://localhost:8080/article/getAll').then(result => {return  result.data}).catch(err => {console.log(err)})
}const articleGetAll =  function(){let data =  getarticle()articlelist.value = data;
};articleGetAll()
console.log(articlelist)

上面的代码是异步调用的,导致拿到的数据没有解构,还是promise对象,造成了显示上的错误
在这里插入图片描述

代码修改

要让代码变成同步的需要使用await(写在调用异步函数的前面, 这个关键字会一直等待返回的结果)。 async关键字和await配套使用,在使用到await的函数声明前要加上async关键字

async函数返回的是一个Promise对象,如果在函数中return一个值,async内部会调用Promise.resolve()帮你封装成一个Promise对象,如果async函数内部抛出错误,内部就会调用Promise.reject()返回Promise对象,在函数的外层不能用await关键字的时候,我们需要用.then()来处理Promise对象

在调用axios的地方加上await关键字,同时在对应函数上加async。但是这样的结果还是不对的,因为async函数返回的值是promise,这样得到的值还是promise对象
在这里插入图片描述
既然又变成了一个异步函数,那么就在调用时再套娃一次,加上await
在这里插入图片描述
成功显示
在这里插入图片描述
成功原因分析
在这里插入图片描述

总结

在使用异步变同步的时候,尽量不要使用async的返回值,因为返回值是promise对象
使用时应该在sync函数的内部调用await的地方等待数据解构,结构完成就能得到原始数据,再使用原始数据进行操作

相关文章:

关于axios同步获取数据的问题

axios同步获取数据 Axios介绍问题代码修改 总结 Axios介绍 Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 X…...

java-在ANTLR中,如何从java文件中提取类名和方法名0.1.8

java-在ANTLR中,如何从java文件中提取类名和方法名0.1.0 目标java源文件java的g4文件生成antlr代码最终代码调测结果阶段性总结 2024年9月12日11:16:01----0.1.8 目标 从一个java文件中提取出类名和方法名 java源文件 文件名是main.java,具体内容如下…...

十大护眼灯钢琴灯品牌是智商税吗?十大钢琴灯品牌排行榜

十大护眼灯钢琴灯品牌是智商税吗?不良的光线不仅会使得孩子在读写用眼时眼睛不舒服,还会引起视觉疲劳伤眼视力健康,这个时候要能有一台可靠的护眼灯钢琴灯,那真是再好不过了。但是市面上护眼灯钢琴灯的种类太多,盲目挑…...

搜维尔科技:CyberGlove将实时捕捉运动信号和触觉反馈,将其重新定位到人形机器人进行驱动

CyberGlove将实时捕捉运动信号和触觉反馈,然后将其重新定位到人形机器人上。 这款18个传感器(有18节点和22节点两个型号,22节点早期用于美国军事方面,支持无线通信、蓝牙、WiFi、射频)数据手套的每个手指上有两个弯曲…...

数据结构:堆的算法

目录 一堆的向上调整算法二堆的向下调整算法三堆的应用:堆排序四TOPK问题 一堆的向上调整算法 我们在堆中插入一个数据一般实在堆的最后插入然后可以一步一步与上层结点(父结点进行比较),继而进行交换,完成二叉树的结构&#xff0…...

python画图|3D直方图基础教程

前述已经完成了直方图和3D图的基本学习,链接如下: 直方图:python画图|水平直方图绘制-CSDN博客 3D图:python画图|水平直方图绘制-CSDN博客 现在我们尝试把二者结合,画3D直方图。 【1】官网教程 首先,依…...

C语言中的函数,实参,形参,递归

1:什么是函数 2:定义带形式参数的函数和带实际参数的函数 3:递归 --------------------------------------------------------------------------------------------------------------------------------- 1:在 C 语言中&…...

ICM20948 DMP代码详解(15)

接前一篇文章:ICM20948 DMP代码详解(14) 上一回开始对icm20948_sensor_setup函数中第3段代码即inv_icm20948_initialize函数进行解析。为了便于理解和回顾,再次贴出其源码,在EMD-Core\sources\Invn\Devices\Drivers\IC…...

NC 和为K的连续子数组

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 描述 给定一个无序…...

JS设计模式之装饰者模式:优雅的给对象增添“魔法”

引言 在前端开发中,我们经常会遇到需要在不修改已有代码的基础上给对象添加新的行为或功能的情况。而传统的继承方式并不适合这种需求,因为继承会导致类的数量急剧增加,且每一个子类都会固定地实现一种特定的功能扩展。 装饰者模式则提供了…...

准备好了吗?JAVA从业AI开发的学习路线详解

作为一个拥有扎实 Java 基础的人,想要涉足人工智能(AI)应用开发,你已经在编程能力方面打下了很好的基础。Java 是一种通用的、强类型的语言,非常适合于开发高性能的应用程序,尤其是在后端服务和大规模分布式…...

神经网络通俗理解学习笔记(1)

神经网络通俗理解学习笔记(1) 神经网络原理激活函数前向传播和反向传播多层感知机代码实现加载数据网络结构损失函数优化器训练测试保存 回归问题一元线性回归多元线性回归多项式回归 线性回归代码实现数据生成设置超参数初始化参数可视化Pytorch模型实现…...

有n个人,他们需要分配m元钱(m>n),每个人至少分到1元钱,且每个人分到的钱数必须是整数。请问有多少种分配方案?

分配方案 描述 有n个人,他们需要分配m元钱(m>n),每个人至少分到1元钱,且每个人分到的钱数必须是整数。请问有多少种分配方案? 输入 一行,两个整数,分别是人数n与钱数m,用一个空格隔开。 输出 一行&am…...

光耦——创新引擎 助推中国经济高质量发展

近年来,中国经济正处于转型升级的关键时期,高质量发展成为经济发展的重要目标。在这一伟大征程中,光耦作为一种关键性的电子元器件,正在发挥着重要的作用,助力中国经济迈向更加光明的未来。 光耦概念及工作原理 ▲光耦…...

Go 中 RPC 的使用教程

前言 RPC(Remote Procedure Call)是一种允许程序调用远程服务器上函数的方法,调用过程对于开发者来说像是调用本地函数一样方便。Go 语言自带了强大的 net/rpc 库,能够让开发者轻松实现基于 Go 的 RPC 服务。本文将介绍 Go 中 RP…...

挖耳勺可以伸进耳朵多深?安全可视挖耳勺推荐!

一般来说,挖耳勺不应该伸进耳朵太深,外耳道的长度大约在2.5厘米到3.5厘米之间,但不建议将挖耳勺伸进超过外耳道外1/3的深度,也就是大概1厘米左右较为安全。因为如果伸得太深,很容易损伤外耳道皮肤,引起疼痛…...

SuperMap GIS基础产品FAQ集锦(20240911)

一、SuperMap iObjects Java 问题1:【iObject Python】Objects Python产品有哪些能力特性和优势? 11.2.0 【解决办法】iObjects Python产品包含传统GIS功能(基于iObjects Java扩展的功能接口)和AI GIS功能模块。 其中传统GIS功能…...

从状态管理到性能优化:全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compo…...

ChatGPT提示词优化大师使用指南

我希望你成为我的ChatGPT提示词优化大师。 您的目标是帮助我根据自己的需要制定尽可能最好的提示。 你提供的提示应该是站在我向ChatGPT发起请求的角度来写的。我的初始提示词如下:此处填入你的初始提示词 ChatGPT提示词生成器 我希望你充当提示词生成器。 比如&…...

计算机毕业设计 智能推荐旅游平台 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...

day52 ResNet18 CBAM

在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...