vue3使用axios调用接口在.then中给属性设置值无法正确响应

已于 2023-11-01 17:50:08 修改
阅读量197 收藏
点赞数
文章标签： 前端 javascript vue.js
于 2023-11-01 17:48:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50137812/article/details/134166479
版权

最近在学习vue3，于是准备写一个简单的后台管理系统练习一下vue3属性和方法的新写法，结果在使用axios调接口之后发现接口查询到了数据，但是列表没有展示数据

然后偶然我发现加上.value后竟然又变成了响应式的数据，页面也正常展示数据了,所以我干脆在里面加一个userList属性，然后就正常了

有哪位大佬知道是什么原因吗，麻烦告诉我一下

ICMB方然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决vue中使用Axios调用接口时出现的ie数据处理问题
10-18
今天小编就为大家分享一篇解决vue中使用Axios调用接口时出现的ie数据处理问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue中使用axios作交互时，为什么会调用两次接口
04-20
原来在 CORS-跨域资源共享 中，可以使用 OPTIONS 方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；...
使用vue3+axios和后端交互时无法改变的data中的数据
haohulala的博客
04-08 361
今天在编写前端页面的时候，打算引入axios进行ajax请求，可以在这个过程中遇到了一个非常大的坑，先来看看有坑的代码。这个问题我真的处理了非常久，后来发现这种写法在then()里面是没有办法拿到this的，解决的办法在下面这篇文章。下面贴一下完整的代码，代码非常简单，就是和后端交互，将查询出来的数据在渲染到页面上。说起来也非常简单，实际上就是在then()里面将函数的形式修改为=>的形式。可以看到，第二次打印this.msg的时候我们拿到了一个空值。我们看一下浏览器端的console的打印情况。
vue-axios的使用以及axios请求赋值为空的情况
qq_35006507的博客
03-10 1987
1.axios的使用 2.axios请求赋值给data 为空的情况
Vue中axios请求数据赋值不成功——javascript任务队列
weixin_45286211的博客
03-22 5942
Vue中axios请求数据赋值不成功 问题描述 axios向后端请求数据，在赋值时发现只有在axios中才有数据，而axios访问数据就是空的 在created()中调用请求数据与处理数据的方法 代码： 前端没有数据 输出 可以从控制台输出结果看到，axios外的数据是空的 ...
vue3中对象无法赋值问题
weixin_40968646的博客
02-08 1721
简介：查看变量是否和ref重名，修改重名变量即可。
vue绑定数据不生效的原因--axios
m0_46820776的博客
05-05 1095
vue使用axios，data数据不生效
前端实现vue3使用axios调用后端接口
qq_66180056的博客
10-20 1万+
vue3、axios、联调、vue.config.js、proxy，拦截器，前后端交互
vue3中使用axios
热门推荐
记录学习的一些知识，也希望这些记录总结能帮到需要的人！
02-25 3万+
vue3中使用axios 1.axios在vue3.x中的基础入门使用 在不涉及使用axios进行请求拦截以及响应拦截的场景下，axios的使用可以简化为以下步骤。 step1. 使用npm安装axios npm install axios step2. 我们将要使用的axios实例单独编写成一个js文件，文件夹可以建立在src/plugins/（自己选择建立在什么地方）。命名为： axiosInstance.js //axiosInstance.js //导入axios import axio
vue中使用axios调用接口
YZY010313的博客
05-06 1215
getMsg（） { axios ( { method: "post", url: " 接口地址"， responseType: "blob",/// 设置相应头 // `headers`是要发送的自定义请求头 headers: {'X-Requested-With': 'XMLHttpRequest'}, data： qs.stringify ({ date: "2019", name: "冬天的太阳” }) }).then (res => { .
Vue学习--Vue项目中使用axios调用后端接口
xian的博客
09-13 1077
文章目录前言一、axios的安装二、使用axios封装工具类utils/request.js三、在api.js中调用工具类请求接口数据四、将所有结构挂载到$api对象上五、 在页面中调用 前言 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 它的主要特性包括： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据
VUE使用axios调用后台API接口的方法
10-15
主要介绍了VUE使用axios调用后台API接口的方法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
主要介绍了详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 501
记录一次前端页面崩溃的产生及处理
前端开发记录
最新发布
qq_25806839的博客
05-31 161
【代码】前端开发记录。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 512
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 938
Web前端三大主流框架介绍：Angular、React、Vue
vue 笔记03
m0_47045804的博客
05-30 868
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
vue3TS使用axios调用后端接口
07-28
你可以使用Axios来在Vue 3和TypeScript中调用后端接口。首先，确保你已经安装了Axios依赖，你可以通过运行以下命令来安装： ``` npm install axios ``` 接下来，在你的Vue组件中，你可以导入Axios并使用它来发送HTTP请求。在你的脚本部分，添加以下行： ```typescript import axios from 'axios'; // ... axios.get('/api/endpoint') .then(response => { // 处理成功响应 }) .catch(error => { // 处理错误响应 }); ``` 这是一个简单的示例，使用了Axios的GET方法来发送一个请求到`/api/endpoint`。你可以根据需要使用其他HTTP方法，比如POST、PUT、DELETE等。 如果你需要在请求中发送数据，你可以将数据作为第二个参数传递给Axios方法。例如，使用POST方法发送数据的示例： ```typescript axios.post('/api/endpoint', { data: 'example data' }) .then(response => { // 处理成功响应 }) .catch(error => { // 处理错误响应 }); ``` 这里的第二个参数是一个包含待发送数据的对象。 同时，你还可以为Axios添加全局配置，比如设置请求头或拦截器等。你可以在Vue应用的入口文件中进行配置，例如在`main.ts`文件中： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import axios from 'axios'; // 设置基础URL axios.defaults.baseURL = 'https://api.example.com'; // 添加请求拦截器 axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, error => { // 处理请求错误 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(response => { // 对响应数据做些什么 return response; }, error => { // 处理响应错误 return Promise.reject(error); }); createApp(App).mount('#app'); ``` 这里的示例设置了基础URL，并添加了请求和响应拦截器，你可以根据需要进行修改。 这就是使用Axios在Vue 3和TypeScript中调用后端接口的基本方法。你可以根据你的具体需求进一步扩展和优化代码。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值