Axios的基本使用
Axios的基本使用
介绍
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在vue 中，用来发ajax请求，与后端交互。
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
axios的get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); $.ajax({
url:'',
type'get',
success:function(data){
},
error:function(err){
}
})
aixos的post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios的默认配置
导入axios模块，然后直接用axios引用的方式，只适合该组件，其他组件要用，又要导入很麻烦。
未来以后axios是一个局部作用域的那么我们可以通过
Vue.prototype.$axios = axios;
此时我们就可以在任意组件中通过this.$axios获取到当前的axios实例
默认配置URL
axios.defaults.baseURL = 'http://127.0.0.1:8800'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--发送ajax请求，需先引入模块-->
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
data() {
return {
msg: ''
}
},
template: `
<div>
<button @click = 'sendAjax'>发Get</button>
<div v-html = 'msg'></div>
<button @click = 'sendAjaxByPost'>发post请求</button>
</div>
`,
methods: {
sendAjax() {
// 发送get请求
axios.get('http://127.0.0.1:8800/4')
.then(res => { // res 是返回的对象
console.log(res);
console.log(res.data); // 返回对象里面的数据
console.log(typeof res.data);
this.msg = res.data;
})
.catch(err => { // 捕捉错误信息
console.log(err);
}) },
sendAjaxByPost() {
var params = new URLSearchParams();
params.append('name', 'alex');
axios.post('http://127.0.0.1:8800/create', params)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
}
}
};
new Vue({
el: "#app",
data() {
return {}
},
components: {
App
},
template: `<App></App>`
}) </script> </body>
</html>
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script> <!-- vue和axios都是全局的对象 未来 axios会成为局部作用域-->
<script type="text/javascript"> // 挂载 Vue.prototype.$axios = axios; 使用插件
Vue.prototype.$axios = axios; // 后面直接使用 this.$axios 调用 // 配置公共的url
axios.defaults.baseURL = 'http://127.0.0.1:8800';
var App = {
data() {
return {
msg: '',
datas: []
}
},
template: `
<div>
<button @click = 'sendAjax'>发Get</button>
<div v-html = 'msg'></div>
<button @click = 'sendAjaxByPost'>发post请求</button>
{{datas}}
</div>
`,
methods: {
sendAjax() {
// 发送get请求
this.$axios.get('/')
.then(res => {
console.log(res.data);
console.log(typeof res.data);
this.msg = res.data; })
.catch(err => {
console.log(err);
}) },
sendAjaxByPost() {
var params = new URLSearchParams();
params.append('name', 'alex'); this.$axios.post('/create', params)
.then( res => { console.log(this);
console.log(res);
this.datas = res; // 将返回的结果，更改到 data
})
.catch(err => {
console.log(err);
})
}
}
}; new Vue({
el: "#app",
data() {
return {}
},
components: {
App
},
template: `<App />`
}) </script> </body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script> <!-- vue和axios都是全局的对象 未来 axios会成为局部作用域-->
<script type="text/javascript"> // 挂载 Vue.prototype.$axios = axios; 使用插件
Vue.prototype.$axios = axios; // 后面直接使用 this.$axios 调用 // 配置公共的url
axios.defaults.baseURL = 'http://127.0.0.1:8800';
var App = {
data() {
return {
msg: '',
datas: []
}
},
template: `
<div>
<button @click = 'sendAjax'>发Get</button>
<div v-html = 'msg'></div>
<button @click = 'sendAjaxByPost'>发post请求</button>
{{datas}}
</div>
`,
methods: {
sendAjax() {
// 发送get请求
this.$axios.get('/')
.then(res => {
console.log(res.data);
console.log(typeof res.data);
this.msg = res.data; })
.catch(err => {
console.log(err);
}) },
sendAjaxByPost() {
var params = new URLSearchParams();
params.append('name', 'alex'); this.$axios.post('/create', params)
.then( res => { console.log(this);
console.log(res);
this.datas = res; // 将返回的结果，更改到 data
})
.catch(err => {
console.log(err);
})
}
}
}; new Vue({
el: "#app",
data() {
return {}
},
components: {
App
},
template: `<App />`
}) </script> </body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script> <!-- vue和axios都是全局的对象 未来 axios会成为局部作用域-->
<script type="text/javascript"> // 挂载 Vue.prototype.$axios = axios; 使用插件
Vue.prototype.$axios = axios; // 后面直接使用 this.$axios 调用 // 配置公共的url
axios.defaults.baseURL = 'http://127.0.0.1:8800';
var App = {
data() {
return {
msg: '',
datas: []
}
},
template: `
<div>
<button @click = 'sendAjax'>发Get</button>
<div v-html = 'msg'></div>
<button @click = 'sendAjaxByPost'>发post请求</button>
{{datas}}
</div>
`,
methods: {
sendAjax() {
// 发送get请求
this.$axios.get('/')
.then(res => {
console.log(res.data);
console.log(typeof res.data);
this.msg = res.data; })
.catch(err => {
console.log(err);
}) },
sendAjaxByPost() {
var params = new URLSearchParams();
params.append('name', 'alex'); this.$axios.post('/create', params)
.then( res => { console.log(this);
console.log(res);
this.datas = res; // 将返回的结果，更改到 data
})
.catch(err => {
console.log(err);
})
}
}
}; new Vue({
el: "#app",
data() {
return {}
},
components: {
App
},
template: `<App />`
}) </script> </body>
</html>
默认配置
Axios的基本使用的更多相关文章
- 为什么axios请求接口会发起两次请求
之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...
- axios基本用法
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...
- Axios、Lodash、TweenJS
Axios是一个基于promise的HTTP库 http://chuansong.me/n/394228451820 Lodash是一个JavaScript的函数工具集 http://www.css8 ...
- axios全攻略
随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...
- 抛弃vue-resource拥抱axios
vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...
- Vue+axios 实现http拦截及路由拦截
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...
- vue使用Axios做ajax请求
vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...
- vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
- 9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
问题描述: 由于restful接口需要在头部header传递两个字段: Content-Type: application/jsonAccess-Token: 84c6635800b14e0eba4f ...
- vue2.0设置proxyTable使用axios进行跨域请求
这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vue ...
随机推荐
- 集中化管理平台Saltstack安装配置
salt是一个异构平台基础设置管理工具(虽然我们通常只用在Linux上),使用轻量级的通讯器ZMQ,用Python写成的批量管理工具,完全开源,遵守Apache2协议,与Puppet,Chef功能类似 ...
- C++17尝鲜：类模板中的模板参数自动推导
模板参数自动推导 在C++17之前,类模板构造器的模板参数是不能像函数模板的模板参数那样被自动推导的,比如我们无法写 std::pair a{1, "a"s}; // C++17 ...
- scrollTop实现图像循环滚动（实例1）
<html><head><title>scrollTop实现图像循环滚动(实例1)</title><meta http-equiv="C ...
- StringBuild的一个小问题
今天在项目开发的过程中写了一小段代码: sb_result.AppendFormat("{\"SmsmTaskModeName\":\"{0}\",\ ...
- CentOS7使用yum详细搭建zabbix3.2过程
本文引用于:http://blog.csdn.net/s3275492383/article/details/62417210 一.准备搭建环境: 1.系统:CentOS7 2.默认有使用linux服 ...
- where T:new() 是什么意思
经常看到方法后面加where T:new() ,下面来解释下 比如如下这个方法 protected static T CreateNewInstance<T>() where T : ...
- .net 委托的用法
定义了两个委托 //Func有返回值:Action无返回值.两个委托 Func<int,int> f= a =>a+1;//参数,返回值: int reslut=f(5);//6
- 日志记录发布网站之后不成功，对路径“C:\Inetpub\wwwroot\***\***.xls”的访问被拒绝。
主要是web程序的根目录文件夹路径访问权限不够,新增加一个everyone的完全控制读写的权限即可!---------折磨了两天,才发现使劲使错了地方. 另外: 一定谨记!!!!! 所写的路径如果不存 ...
- LibreOJ 6282 数列分块入门 6(在线插入在线查询)
题解:还是分块,将每个块存入vector,然后在插入的时候就是sqrt(n)级的重构,如果块太大了,暴力将这个块拆开. 代码如下: #include<cmath> #include< ...
- ftp使用（图文详解）
41,准备: FileZilla_Server-v0.9.41.rar 2.安装,可以全部默认下一步 这里装在了E盘 3安装成功添加用户 添加用户名yanan 选择share folders选择要共享 ...