vue axios用法教程详解

 更新时间:2017年07月23日 10:21:00   作者:zeroJustGG  
axios是vue-resource后出现的Vue请求数据的插件。下面我们通过本文给大家介绍vue axios用法教程详解,感兴趣的朋友一起看看吧

axios是vue-resource后出现的Vue请求数据的插件。vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios。

下面我们来使用axios

 npm install axios --save-dev 
 import axios from "axios" 

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题

1 1.    Vue.prototype.$ajax=axios

好像还有另外一种方法,是不需要去修改Vue的原型的,那就是我们除了npm install安装axios依赖以外,再去安装一个vue-axios

 npm install vue-axios --save-dev<br>import Vueaxios from "vue-axios" 

 我都是用第一种方法的,这种没试过,有兴趣大家可以去试试。

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令

 methods: {
 submitForm () {
  this.$ajax({
   method: 'post',
   url: '你的请求url',
   data: {
    name: 'haha','
   }
  })
} 

  上述只是写了发起请求,并没有请求返回数据的回调。

 .then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
}) 

  这是axios的回调函数,.then为请求成功的回调函数,而.catch为请求失败的回调函数

  这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例,怎么办嘞????

  只要添加一个 .bind(this) 就能解决这个问题

 then(function(res){
 console.log(this.data)
}.bind(this)) 

以上所述是小编给大家介绍的vue axios用法教程详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • Vue实现模糊查询搜索功能的步骤详解

    Vue实现模糊查询搜索功能的步骤详解

    本文主要介绍了Vue实现模糊查询搜索功能的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • 在Vue项目中优化字体文件的加载和缓存的常用方法

    在Vue项目中优化字体文件的加载和缓存的常用方法

    在现代 Web 开发中,字体文件通常是页面加载时间的重要因素之一,特别是在字体文件较大或网络环境不佳的情况下,用户体验可能会受到影响,本文将详细探讨如何在 Vue.js 项目中优化字体文件的加载和缓存,以提高页面性能,需要的朋友可以参考下
    2024-09-09
  • element el-upload文件上传覆盖第一个文件的实现

    element el-upload文件上传覆盖第一个文件的实现

    这篇文章主要介绍了element el-upload文件上传覆盖第一个文件的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue input组件如何设置失焦与聚焦

    vue input组件如何设置失焦与聚焦

    这篇文章主要介绍了vue input组件如何设置失焦与聚焦,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue简介、引入、命令式与声明式编程详解

    Vue简介、引入、命令式与声明式编程详解

    原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式:命令式编程和声明式编程,下面这篇文章主要给大家介绍了关于Vue简介、引入、命令式与声明式编程的相关资料,需要的朋友可以参考下
    2022-10-10
  • element自定义表单验证上传身份证正反面的实现

    element自定义表单验证上传身份证正反面的实现

    表单验证在很多地方都可以用的到,本文主要介绍了element自定义表单验证上传身份证正反面的实现,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 基于vue2.0实现的级联选择器

    基于vue2.0实现的级联选择器

    这篇文章主要介绍了基于vue2.0实现的级联选择器,基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联,有兴趣可以了解一下
    2017-06-06
  • 详解vuex中action何时完成以及如何正确调用dispatch的思考

    详解vuex中action何时完成以及如何正确调用dispatch的思考

    这篇文章主要介绍了详解vuex中action何时完成以及如何正确调用dispatch的思考,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 使用vue自定义指令开发表单验证插件validate.js

    使用vue自定义指令开发表单验证插件validate.js

    今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程,需要的朋友可以参考下
    2019-05-05
  • vite环境变量配置小结

    vite环境变量配置小结

    Vite环境变量配置是Vite开发环境下重要的一环,它能够根据不同的环境变量对项目进行不同的配置,使得项目更加灵活和可维护,本文就来介绍一下vite环境变量配置小结,感兴趣的可以了解一下
    2023-11-11

最新评论