vue.js 怎么引入axios

JavaScript08

vue.js 怎么引入axios,第1张

首先在 main.js 中引入 axios

?

1

import axios from 'axios'

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

Vue.prototype.$ajax = axios

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

methods: { submitForm () { this.$ajax({ method: 'post', url: '/user', data: { name: 'wise', info: 'wrong' } })}

分为以下几个步骤:

①npm 安装axios,文件根目录下安装。

②修改原型链,在main.js中引入axios,接着将axios改写为Vue的原型属性,这样之后就可在每个组件的methods中调用$http命令完成数据请求。

现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢?

通常情况下,我们搭建好的项目目录应该是这样子的

首先需要安装axios,这个会npm的都知道

下一步,在main.js中引入axios

import

axios

from

"axios"

与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作

Vue.prototype.$axios

=

axios

接着,我们就可以在App.vue中使用axios了

created:function(){

this.$axios.get("/seller",{"id":123}).then(res=>{

console.log(res.data)

})

}

以上这篇在vue组件中使用axios的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:在Vue组件化中利用axios处理ajax请求的使用方法详解axios在vue中的简单配置与使用详解Vue.js

2.0

如何使用axiosVue.js实战之使用Vuex

+

axios发送请求详解vue-axios使用详解