vue整合的axios(Bug)

最新推荐文章于 2023-11-16 15:30:20 发布
最新推荐文章于 2023-11-16 15:30:20 发布
阅读量1.3k 收藏 3
点赞数 2
分类专栏： Vue 文章标签： Vue整合axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43201015/article/details/83352899
版权

vue整合axios(Bug)

在项目中需要用到后台的数据对前端渲染，使用到了vue整合的axios，使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data（）中定义的属性：

img

执行后页面报错：

img

原因分析：

在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。也就是说方法中的 this 指的是当前 function 中的，但是该函数中并没有 forklifts 属性，所以报undefined

解决方案：

箭头函数

箭头函数特点

  • 箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
  • 箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值
  • 箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向

img

this 转移

将指向vue对象的this赋值给外部方法定义的属性，然后在内部方法中使用该属性

img

Do Re Mi
关注
专栏目录
TypeScript封装axios——Vue3+TypeScript实践
weixin_46567428的博客
01-03 3226
TypeScript封装axios简介1. 认识axios1.1 为什么选择axios2. axios基本使用3. 用面向对象的思想封装axios3.1 为什么要对axios进行封装？3.2 用面向对象的思想封装axios3.2.1 基础封装3.2.2 支持传入自定义拦截器功能4. 使用封装后的HRequest 简介 最近在用Vue3 + TypeScript 重构一个Vue2项目，之前项目中用到axios来发送网络请求，进行前后端交互，但并未对axios库做过多的封装，导致代码重复度较高，维护起来比较麻烦
Springboot+vue整合
热门推荐
weixin_44427407的博客
12-31 2万+
SpringBoot+Vue实战–博客管理 ​ 这段时间决定自学Vue并使用Springboot框架整合Vue项目。终于，再不懈的努力下，终究完成了一个个人博客系统。基本实现了，个人的添加博客模块，删除博客模块修改以及删除模块。下面就开始简单的介绍这个项目 Vue部分： ​ 现在主流都是前后端分离，各自完成自己部分，最后合并。vue是一个应用广泛的前端框架。本次博客管理系统的前端部分就是使用的vue。 对于Vue项目，首先就要使用脚手架创建vue项目，脚手架创建项目的方式有很多种.
vueaxios将axios整合到VueJS的封装
08-08
vue-axios：将axios整合到VueJS的封装
【小项目】Vue 整合 Axios
313YPHU3的博客
08-27 358
【小项目】Vue 整合 Axios
VUE项目整合Axios
最新发布
chuanhai888的博客
11-16 287
vue项目使用组件前先引入依赖（注意：axios对node版本有要求，如果最新版本axios报错，可以降低axios版本）import { post } from ‘@/api/http’ //在文件中引入http.js文件。post(‘/****/***后台方法路径’, 请求参数).then(response => {})新增一个js文件来封装axios，在vue项目新增文件夹utils，js文件request.js。再新增http.js文件，用于封装get、post请求。
Vue总结（二）—— 整合axios
qq_43776195的博客
03-06 3415
文章目录Vue总结（二）—— 整合axios1、axios1.1 axios 简介1.2 axios基本使用1.3 axios拦截器（interceptor）1.3.1 封装axios2、代理配置（解决跨域）2.1 方法一2.2 方法二2.3 示例代码3、vue整合axios3.1 创建vue-cli 项目3.2 封装axios3.3 main.js 引入，添加到vue原型对象3.4 代理配置（解决跨域问题）3.5 使用 Vue总结（二）—— 整合axios 本文参考： vue项目中axios模块封装和ax
axios和vue的整合操作，还不来看看
程序小白的博客
04-03 2609
axios和vue的整合操作，还不来看看
使用Vue+axios+Servlet+Lombok+JDBC+MySQL技术栈实现云笔记管理系统案例的开发
06-14
4. **前端界面设计**：使用Vue.js 创建用户界面，结合axios与Servlet通信，实现各种功能。 5. **前后端交互**：定义API接口，使前端通过axios调用后端Servlet，完成数据交换。 6. **测试与调试**：对整个系统进行...
前端常见知识点汇总(ES6，Vue，axios，Node.js，npm，webpack)
m0_67402914的博客
06-21 495
有了前后端的相关的知识，我们就从0到1写一个前后端分离项目了， 后面会继续更新谷粒学院项目。 敬请期待！！！ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Net
axios传数组到后台_Vue中使用Axios传递数组参数给SpringBoot后台时的实现方式
weixin_31474035的博客
12-24 976
场景在前端需要实现多选，然后将所选的序号的数组传递到后台Springboot接口需要传递的参数是一个int数组。handleCompleted() {if (this.ids == null || this.ids.length == 0) {this.$alert("请先选择一条数据", "提示", {confirmButtonText:"确定",});}else{handCompletedRe...
vue集成axios
u013008898的博客
10-16 604
npm install axios --save ========================= main.js: import axios from 'axios' Vue.prototype.$axios = axios; ========================= test: <script> export default { name: 'HelloWorld', data () { return { msg: 'Welco.
Vue 整合 axios
new_baibai的博客
02-28 253
vue 整合 axios 请求
vue axios整合
柳絮飞祭奠（java交流分享群：522818473）
02-28 1423
第一步： 安装 cnpm install axios 第二步：新建一个http.js http.js内容： import Axios from 'axios' // 设置后端api路径 Axios.defaults.baseURL = 'http://127.0.0.1:8082' // Axios.defaults.headers['Access-Control...
vue整合axios和element
weixin_43884534的博客
11-13 444
vue整合axios和element）整合axios整合element 整合axios 安装axios npm install axios 在项目目录下添加vue.config.js module.exports = { devServer: { //要设置当前访问的ip 否则失效 host:"localhost", //浏览器自动打开页面 open: true, proxy: { '/api'
vue-axios整合使用
zcy_csdn123的博客
10-18 247
http://blog.csdn.net/hant1991/article/details/74931158
vue中的axios
weixin_45387568的博客
11-04 122
import axios from "axios"; axios.defaults.baseURL = "https://elm.cangdu.org/"; axios.interceptors.response.use(function (response) { return response.data; }, function (error) { // 对响应错误做点什么 re...
在vue中使用axios
pingting_的博客
02-25 537
在vue中使用axios1. 基本用法演示2. 把 axios 挂载到 Vue 原型上并配置请求根路径2.1 挂载2.2 配置请求根路径2.3 缺点2.4 main.js 源码 1. 基本用法演示 get 请求 <button @click="getInfo">发起 GET 请求</button> methods: { async getInfo () { const { data: res } = await axios.get('http://www
vue项目中配置axios
weixin_45975254的博客
11-23 410
vue项目中配置axios 第一种 //生产环境判断 线下测试域名 线上服务器域名 const BASEAPI = process.env.NODE_ENV === ‘development’ ? ‘网址’ : ‘网址’ // 创建axios实例 const request = axios.create({ baseURL: BASEAPI, //请求接口域名 timeout: 60000, // 请求超时设置 withCredentials: false, //是否让axios请求携带 cookies 如
vue安装使用axios（包括axios上传文件）
qq_17627195的博客
10-28 435
引入axios（可以在需要的地方引入，不用全局引入）如果需要上传文件，记得修改。
vue整合axios
07-28
回答: Vue整合axios是指在Vue项目中使用axios库来进行网络请求。首先，需要创建一个Vue项目，可以使用vue-cli来快速搭建。然后，将axios库封装到项目中，可以在util文件夹中创建一个http.js文件来封装axios。在main....
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值