踩坑分享（ 11 ）- 使用vue-axios报错：TypeError: this.axios is not a function

最新推荐文章于 2023-07-28 12:46:52 发布

原创最新推荐文章于 2023-07-28 12:46:52 发布 · 4.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

踩坑分享专栏收录该内容

20 篇文章

订阅专栏

本文档展示了在Vue应用中使用axios发送HTTP请求时遇到的问题及解决方法。通过调整VueAxios和axios的导入顺序，修复了`this.axios is not a function`的错误，实现了客户端向服务器端发送POST请求并成功接收参数的功能。后端使用了Spring MVC的@RequestMapping注解处理请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import Vue from 'vue'
import App from './App'
import axios from "axios";
import VueAxios from "vue-axios";

Vue.config.productionTip = false;
Vue.use(axios,VueAxios);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})

相关的文件都导入了，但是还是 this.axios is not a function

然后这样纠正，换VueAxios,axios的顺序就可以了

成功发送接收参数

接收端代码

@RequestMapping("/c")
@Controller
@ResponseBody
@CrossOrigin
public class Demo {

    @RequestMapping
    public void test(String s) {
        System.out.println(s);
    }
}f

客户端

this.axios(
  {
    url: "http://localhost:8080/c",
    method: 'post',
    data: {
      s: "get"
    },
    transformRequest:function (data) {
      return Qs.stringify(data);
    }
  }
);