axios vue

import axios from 'axios'
Vue.prototype.$http = axios

其他地方使用的话 如同使用 vue-resource 一样

this.$http.get(URL).then(response => {
    // success callback
}, response => {
    // error callback
})

转载于:https://www.cnblogs.com/cherryblog/p/8461195.html

### 如何在 Vue 2 中使用 Axios 进行 HTTP 请求 #### 安装 Axios 为了能够在 Vue 2 项目中利用 Axios 发起网络请求,需先通过 npm 或 yarn 来安装 Axios库。执行命令如下所示: ```bash npm install axios --save ``` 或者如果偏好使用yarn,则可以运行: ```bash yarn add axios ``` 这一步骤确保了 Axios 成功集成到项目的依赖环境中[^1]。 #### 引入 AxiosVue 项目 完成安装之后,在 Vue 组件内部或是 main.js 文件里全局注册 Axios 实例以便于在整个应用范围内访问。对于局部导入情况可以在单文件组件顶部加入 import 语句实现特定位置加载 Axios 功能模块。 ```javascript // 在main.js中全局配置axios实例 import Vue from 'vue'; import App from './App.vue'; import axios from 'axios'; Vue.prototype.$http = axios; // 将axios挂载至Vue原型上, 方便各处调用 ``` 这样设置后就可以直接在任何组件的方法体内通过 `this.$http` 访问 Axios 方法了。 #### 使用 Axios 发送 GET 和 POST 请求 当准备就绪时,可以通过调用 `$http.get()` 或者 `$http.post()` 等相应函数来发起不同类型的 HTTP 请求。下面给出两个例子分别展示了如何获取资源列表以及提交表单数据给服务器端API接口。 ##### 获取远程数据 (GET) ```javascript methods: { fetchData() { this.$http.get('/api/data') .then(response => { console.log('Data received:', response.data); }) .catch(error => { console.error('Error fetching data:', error); }); } } ``` 此段代码演示了一个典型的 GET 请求流程,其中包含了成功回调 `.then()` 处理接收到的数据,还有错误处理机制 `.catch()` 报告可能发生的异常状况。 ##### 提交新记录 (POST) ```javascript methods: { submitForm(formData) { this.$http.post('/api/submit', formData) .then(response => { alert('Submission successful!'); }) .catch(error => { console.error('Failed to submit form:', error); }); } } ``` 这里展示的是怎样构建一个 POST 请求去上传信息到指定的服务地址,并同样提供了针对响应的成功与失败两种情形下的逻辑分支。 #### 总结 综上所述,在 Vue 2 应用程序里面运用 Axios 执行各种形式的 HTTP 操作既简单又高效。只需按照上述指导完成必要的准备工作——即安装、引入和适当配置——就能快速建立起前后端之间的交互通道,从而更好地支持现代 Web 开发需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值