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

本文介绍了在Vue-cli构建的项目中,如何安装和配置Axios,并通过vue-axios将其挂载到Vue上,以便于在组件中方便地发送Ajax请求。

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

最近在项目里需要发送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);
                });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值