在vue中如何使用axios
1.前言
在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。
关于为什么放弃推荐? -> 尤大原话
最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果,
vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用,
但以后不再把 vue-resource 作为官方的 ajax 方案。这里可以去掉 vue-resource,文档也不必翻译了。
2.安装axios
npm install axios --save
3.引入
安装其他插件的时候,可以直接在main.js
中引入并使用 Vue.use()
来注册,但是 axios
并不是vue
插件,所以不能 使用Vue.use()
,所以只能在每个需要发送请求的组件中即时引入。
为了解决这个问题,我们在引入 axios
之后,通过修改原型链,来更方便的使用。
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios
4.使用
在 main.js
中引入之后,就能直接在组件的 methods
中使用axios
了
methods: {
postData () {
this.$axios({
method: 'post',
url: '/user',
data: {
name: 'xiaoming',
info: '12'
}
})
}
(完)
免责声明
- 本博客所有文章仅用于学习、研究和交流目的,欢迎非商业性质转载。
- 博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。
- 博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。
- 博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章,请原谅博主成为一个无耻的文档搬运工!
posted on 2018-09-20 11:49 难凉热血,码梦为生! 阅读(414) 评论(0) 编辑 收藏 举报