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>
