Vue入门（10）axios

1.安装

npm install axios

2.使用

执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 可选地，上面的请求可以这样做
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

执行 POST 请求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

执行多个并发请求

function getUserAccount() {return axios.get('/user/12345');
}function getUserPermissions() {return axios.get('/user/12345/permissions');
}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 两个请求现在都执行完成}));

3.axios API

transformResponse 在传递给 then/catch 前，允许修改响应数据。

<div id="app"><button @click="handler">按钮</button><h1>这是请求回来的数据{{msg}}</h1>
</div>
<script>new Vue({el : "#app",data(){return {msg : ""}},methods : {handler(){axios.get("http://ltggbm.ktkt.com/1/report/index",{transformResponse: [function (data) {// 对 data 进行任意转换处理data = JSON.parse(data);console.log(data[0].title);data[0].title = 111return data;}]}).then((res) => {console.log(res.data[0].title);this.msg = res.data[0].title}).catch((err) => {});}}})
</script>

配置公共数据

<div id="app"><button @click="handler">按钮</button><h1>这是请求回来的标题:{{title}}</h1><p>这是请求回来的内容:{{content}}</p>
</div>
<script>new Vue({el: "#app",data() {return {title: "",content: ""}},methods: {handler() {//配置公共数据axios.defaults.baseURL = "http://ltggbm.ktkt.com/";axios.get("1/report/index").then((res) => {this.title = res.data[0].title;this.content = res.data[0].content}).catch((err) => {});}}})
</script>

Vue入门（10）axios相关推荐

js请求结果拦截机器_分享：一步一个脚印，vue入门之axios的应用及拦截封装
一.概述在vue2.0项目中,我们主要使用axios进行http请求. axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特征: 1.从浏览器中创建X ...
Vue入门到上手（10）—— VueJs 填坑日记之在项目中使用Amaze UI
Vue入门到上手(10)-- VueJs 填坑日记之在项目中使用Amaze UI 上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Ama ...
axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...
Vue入门之Web端CURD前端项目示例
Vue入门之Web端CURD前端项目示例随着vue.js越来越火,很多不太懂前端的小伙伴想要入坑.而入坑最好的办法就是上手实际操作,因此本文将重点放在实际操作上,对理论不做过多解释,不明白的地方小伙 ...
VUE入门+5个小案例
本文是我心血来潮学习Vue框架所做的笔记,也供童鞋们学习参考.作为后端的开发人员,学习前端的Vue框架只是单纯地去了解下前端框架的内容,所以并没有深入地去学习,因此本文只适合Vue入门的童鞋哦.由于我 ...
Vue 学习笔记（1） Vue 基础语法 + Axios 基本使用
Vue Vue 简介下载 Vue {{}}:插值表达式 v-text:显示文本 v-html:显示解析html标签的文本 v-on:事件绑定 v-show:控制页面元素隐藏与显示(display控制 ...
vue入门（猴子都能学会）
目录一. vue简介 1. Vue.js是什么? 2. 库和框架的区别 3. MVVM的介绍二.Vue入门 1.导入js依赖 2.定义vue所管理边界 3.创建vue实例挂载边界三. Vue事 ...
Vue框架---Vue入门
Vue概述 Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 vue.js的核心特点-响应的数据绑定传统的js操作页面:在以前使用js操作页面的时候是这样的,需要操作某个html ...
微服务和VUE入门教程(26): 微服务之turbine
微服务和VUE入门教程(26): 微服务之turbine 微服务和VUE入门教程(0): 着手搭建项目微服务和VUE入门教程(1): 搭建前端登录界面微服务和VUE入门教程(2): 注册中心微服 ...
Vue入门之组件化开发
Vue入门之组件化开发 http://www.jianshu.com/p/6718ab1caa81 组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的 ...

Vue入门（10）axios

1.安装

2.使用

执行 GET 请求

执行 POST 请求

执行多个并发请求

3.axios API

Vue入门（10）axios相关推荐

最新文章

热门文章