vue-cli(vue2.x)中使用axios
2018-11-06 13:41
537 查看
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性
浏览器端发起XMLHttpRequests请求
Node端发起http请求
支持Promise API
拦截请求和响应
转化请求和响应(数据)
取消请求
自动转化json数据
客户端支持抵御XSRF(跨站请求伪造)
1、在项目根目录下使用npm安装
npm install axios --save
2、全局引入axios
在入口处文件(main.js)引入axios并原型化axios。
import axios from 'axios' //Vue.use(axios) // 注意 这样的用法是有问题的,axios不支持Vue.use()的声明方式 Vue.prototype.$ajax = axios // 只是import进来是无法使用 axios 命令的。所以我们将 axios 改写为 Vue 的原型属性。那么在其他组件中就能使用$ajax方法了
3、使用axios
可以直接在任意组件中的js代码处使用
this.$ajax()方法来请求接口数据了。
this.$ajax({ method: 'get', //请求方式 url: '请求接口地址' }) .then(function (res) { //成功请求的回调函数 console.log(res) }) .catch(function (error) { //请求失败的回调函数 console.log(error) })阅读更多
相关文章推荐
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- 基于vue-cli的vue项目之axios的使用5--axios方法发送请求
- 在vue-cli脚手架中使用axios时遇到的坑
- 封装axios在vue-cli项目中便捷使用
- 基于vue-cli的vue项目之axios的使用2--最基础的请求
- vue-cli快速构建工程 ElementUI axios router 引入使用
- 使用vue-cli+axios配置代理进行跨域访问数据
- Vue2 Vue-cli中使用Typescript的配置详解
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 基于vue-cli的vue项目之axios的使用3--get传参请求
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- (转)VUE2使用vue-cli构建多页面应用+vux(二)
- 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
- vue-cli 使用axios的操作方法及整合axios的多种方法
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- 基于vue-cli的vue项目之axios的使用1--准备工作
- Vue-cli使用axios从跨域服务器获取JSON数据
- 使用vue-cli+axios构建的项目本地环境API代理设置和解决跨域
- 基于vue-cli的vue项目之axios的使用4--并发请求
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy