关于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的地方等待数据解构,结构完成就能得到原始数据,再使用原始数据进行操作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53583.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[SCOI2014] 方伯伯的玉米田(dp+树状数组维护行列)

https://www.luogu.com.cn/problem/P3287 显然每次操作的区间一定是一个后缀 我们直接令 d p ( x , i ) dp(x,i) dp(x,i) 表示最后一个数是 x x x(加之后),加了 i i i 次的最长长度,转移显然 max ⁡ d p ( y ≤ x , j ≤ i …

鸿蒙开发相册获取一张或多张照片,预览

import { photoAccessHelper } from kit.MediaLibraryKit; import { image } from kit.ImageKit; import { fileIo as fs } from kit.CoreFileKit;Entry Component struct Index {State getAlbum: string 显示相册中的图片;State pixelsArray : Array<image.PixelMap> |…

python测试开发---vue的常见指令

在 Vue.js 中&#xff0c;指令是用于在模板中绑定数据和 DOM 元素之间关系的特殊属性。指令通常以 v- 开头&#xff0c;后面跟上指令的名字。了解和使用这些指令是掌握 Vue.js 的关键之一。下面是一些 Vue.js 中常见的指令及其用法。 1. v-bind 作用&#xff1a;动态地绑定 H…

Spring Boot 集成 Redisson 实现消息队列

包含组件内容 RedisQueue&#xff1a;消息队列监听标识RedisQueueInit&#xff1a;Redis队列监听器RedisQueueListener&#xff1a;Redis消息队列监听实现RedisQueueService&#xff1a;Redis消息队列服务工具 代码实现 RedisQueue import java.lang.annotation.ElementTyp…

第2章 方法

本书作者起初以为仅靠研究命令行工具和指标就能提高性能。他认为这样不对。他从头到尾读了一遍手册&#xff0c;看懂了缺页故障、上下文切换和其他各种系统指标的定义&#xff0c;但不知道如何处理它们&#xff1a;如何从发现信号到找到解决方案。 他注意到&#xff0c;每当出…

18、公司信贷管理|贷款额度的测算|贷款期限及其定价的设定逻辑!

银行在综合权衡贷款的第一还款来源和第二还款来源、风险和收益的基础上&#xff0c;应明确提出贷与不贷的意见。经调查审查同意的贷款&#xff0c;应提出最终的融资方案。 合理的融资方案既要有利于提升本行的竞争力&#xff0c;又要有利于控制贷款风险。完整的融资方案一般包…

计算机网络 --- 【2】计算机网络的组成、功能

目录 一、计算机网络的组成 1.1 从组成部分看 1.2 从工作方式看 1.3 从逻辑功能看 1.4 总结 二、计算机网络的功能 2.1 数据通信 2.2 资源共享​编辑 2.3 分布式处理 2.4 提高可靠性 2.5 负载均衡 一、计算机网络的组成 1.1 从组成部分看 我们举例分析计算机网络从…

【人工智能学习笔记】4_4 深度学习基础之生成对抗网络

生成对抗网络&#xff08;Generative Adversarial Network, GAN&#xff09; 一种深度学习模型&#xff0c;通过判别模型&#xff08;Discriminative Model&#xff09;和生成模型&#xff08;Generative Model&#xff09;的相互博弈学习&#xff0c;生成接近真实数据的数据分…

19章 泛型

1.修改程序清单19-1中的GenericStack类&#xff0c;使用数组而不是ArrayList来实现它。你应该在给栈添加新元素之前检查数组的大小如果数组满了&#xff0c;就创建一个新数组。该数组是当前数组大小的两倍&#xff0c;然后将当前数组的元素复制到新数组中。 public class Gene…

​ArcGIS Pro和ArcGIS的10大区别

本文来源&#xff1a;水经注GIS公众号 如果你经常使用ArcGIS 进行制图和分析&#xff0c;那么你一定听说过ArcGIS Pro&#xff0c;这款软件是Esri未来主打的一款桌面GIS软件&#xff0c;那么这款软件和ArcGIS相比有什么不同呢&#xff0c;这里为你列举了两款软件的10大区别&am…

QScopedPointer的了解

QT 智能指针 QPointer QScopedPointer QSharedPointer QWeakPointer QSharedDataPointer 隐式共享 显示共享-CSDN博客 本文摘录自上面的文章 其类似于C11中的unique_ptr&#xff0c;用于管理动态分配的对象的独占所有权&#xff0c;即同一时间只能有一个QScopedPointer指向该…

Docker 安装 Nacos 教程

Nacos 是一个易于使用的平台&#xff0c;用于服务发现和配置管理。它支持服务的注册与发现&#xff0c;同时提供动态配置管理功能。本文将介绍如何使用 Docker 快速安装 Nacos&#xff0c;并提供相应的配置文件 standalone-mysql-5.7.yaml 用于设置 Nacos 与 MySQL 的集成。 参…

文本分类场景下微调BERT

How to Fine-Tune BERT for Text Classification 论文《How to Fine-Tune BERT for Text Classification?》是2019年发表的一篇论文。这篇文章做了一些实验来分析了如何在文本分类场景下微调BERT&#xff0c;是后面网上讨论如何微调BERT时经常提到的论文。 结论与思路 先来看…

Vue跨域问题、Vue配置开发环境代理服务、集成Axios发送Ajax请求、集成vue-resource发送Ajax请求

目录 1. Ajax请求服务介绍2. axios的安装3. Vue跨域问题介绍和解决方案4. 使用vue-cli配置开发环境代理服务4.1 简单配置4.2 复杂配置4.3 二次封装 5. 集成vue-resource发送Ajax请求 1. Ajax请求服务介绍 xhr: new XHLHttpRequest().open()/send()。偏向底层JQuery: 对xhr进行…

Sklearn的datasets模块与自带数据集介绍

datasets 模块 用 dir() 函数查看 datasets 模块的所有属性和函数 import sklearn.datasets as datasets# 列出 sklearn.datasets 模块中的所有属性和函数 print(dir(datasets)) datasets 模块下的数据集有三种类型&#xff1a; &#xff08;1&#xff09;load系列的经典数…

Sqoop 数据迁移

Sqoop 数据迁移 一、Sqoop 概述二、Sqoop 优势三、Sqoop 的架构与工作机制四、Sqoop Import 流程五、Sqoop Export 流程六、Sqoop 安装部署6.1 下载解压6.2 修改 Sqoop 配置文件6.3 配置 Sqoop 环境变量6.4 添加 MySQL 驱动包6.5 测试运行 Sqoop6.5.1 查看Sqoop命令语法6.5.2 测…

Vue 中 计算属性与侦听属性的使用与介绍

Vue 中 计算属性与侦听属性的使用与介绍 计算属性 - computed 计算属性是一种特殊的属性&#xff0c;它依赖于其他属性&#xff0c;并返回一个新的值。当依赖的属性发生变化时&#xff0c;计算属性会重新求值。 计算属性的语法如下&#xff1a; computed: {// 计算属性名: …

【数学建模】2024数学建模国赛经验分享

文章目录 一、关于我二、我的数模历程三、经验总结&#xff1a; 一、关于我 我的CSDN主页&#xff1a;https://gxdxyl.blog.csdn.net/ 2020年7月&#xff08;大二结束的暑假&#xff09;开始在CSDN写作&#xff1a; 阿里云博客专家&#xff1a; 接触的领域挺多的&#xff…

摩尔投票算法--169. 多数元素

169. 多数元素 普通方法-借助map计数 class Solution { public:int majorityElement(vector<int>& nums) {map<int,int> mp;for(int num :nums){mp[num];}for(auto &a :mp){if(a.second>nums.size()/2){return a.first;}}return 0;} }; 进阶&#xff…

【Linux】常用指令(中)(附带基础指令的详细讲解、Linux的一些附加知识)

文章目录 前言1. Linux基础常用指令1.1 通配符 "*"1.2 man指令&#xff08;重要&#xff09;1.2.1 man指令的语法 1.3 何为"指令"&#xff1f;(附带知识)1.4 echo指令1.5 cat指令1.6 Linux下一切皆文件&#xff01;1.6.1 ">" 输出重定向1.6.2…