在用Vue-cli构建的项目里安装并使用Axios发送Ajax请求

   日期:2020-05-14     浏览:98    评论:0    
核心提示:最近在项目里需要发送Ajax请求调接口 由于Vue2.0版本后不再更新vue-resource了 遂选择了Axios一、安装Axios和vue-axios由于Axios是一个库 而不是插件 因此若要在组件里使用 则需要在每个组件里use() 比较麻烦vue-axios是一个包装器 用于将Axios集成到Vue上 这样即可通过全局方法Vue.use()使用Axios插件了npm install --save axios vue-axios二、配置1、引入Axios:import Vue frojavascr

最近在项目里需要发送Ajax请求调接口 由于Vue2.0版本后不再更新vue-resource了 遂选择了Axios

一、安装Axios和vue-axios

由于Axios是一个库 而不是插件 因此若要在组件里使用 则需要在每个组件里use() 比较麻烦
vue-axios是一个包装器 用于将Axios集成到Vue上 这样即可通过全局方法Vue.use()使用Axios插件了

npm install --save axios vue-axios

二、配置

1、引入Axios:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
2、将Axios挂载到Vue上:
Vue.prototype.$axios = axios;

三、使用

在组件里使用时 用this.$axios调用Axios即可:

this.$axios.get("localhost:8080/getData").then((response) => {
	console.log(response.data)
})
this.$axios.post("localhost:8080/login", {
                    username: "xxx",
                    password: "yyy"
                }{headers: { "Content-Type": "application/x-www-form-urlencoded"}})
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
更多>相关资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服