vue项目中axios的用法
1、安装npm install axios vue-axios --save-dev2、在main.js中引入import axios from 'axios';import VueAxios from 'vue-axios';Vue.use(VueAxios, axios);3、用法(1)post请求// post请求调接口this.a...
·
1、安装
npm install axios vue-axios --save-dev
2、在main.js中引入
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
3、用法
(1)post请求
// post请求调接口
this.axios.post('/login/token', {
password: '1',
username: 'admin'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 或是调用axios.API实现post请求
this.axios({
method: 'post',
url: '/login/token',
data: {
password: '1',
username: 'admin'
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
在Vue中实现数据双向绑定拿到调接口要传递的参数
<template>
<div class="login">
<el-form :model="loginForm" label-width="80px">
<el-form-item label="账号:">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码:">
<el-input v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginSubmit">登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'login',
data () {
return {
loginForm: {
password: '',
username: ''
}
};
},
methods: {
loginSubmit () {
let _this = this;
// post请求调接口
this.axios.post('/login/token', _this.loginForm).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 或是调用axios.API实现post请求
this.axios({
method: 'post',
url: '/login/token',
data: _this.loginForm
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
}
}
};
</script>
<style lang="scss" scoped>
.login{
width: 300px;
margin: 0 auto;
}
</style>
(2)put请求
// put请求调接口
this.axios.put('/login/users/liu/password', {
newpassword: '2'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 或是调用axios.API实现put请求
this.axios({
method: 'put',
url: '/login/users/liu/password',
data: {
newpassword: '1'
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
(3)get请求
// 不带参数的get请求
// get请求调接口
this.axios.get('/login/users/liu').then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 或是调用axios.API实现get请求
this.axios({
method: 'get',
url: '/login/users/liu'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 带一个参数的get请求
this.axios.get('/login/users?limit=100').then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
this.axios.get('/login/users', {
params: {
limit: 100
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
this.axios({
method: 'get',
url: '/login/users',
params: {
limit: 100
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 带多个参数的get请求
this.axios.get('/login/users?limit=100&username=li').then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
this.axios.get('/login/users', {
params: {
limit: 100,
username: 'li'
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
this.axios({
method: 'get',
url: '/login/users',
params: {
limit: 100,
username: 'li'
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
(4)delete 请求
// delete请求调接口
this.axios.delete('/login/users/liu').then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 或是调用axios.API实现delete请求
this.axios({
method: 'delete',
url: '/login/users/shan'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
(5)axios全局默认值设置:设置以后应用于每个请求。
设置axios应该在main.js中设置,也可以单独建一个js文件,在该js文件中设置,然后再在main.js中使用import导入该js文件
// 设置项目请求的根路径,设置以后,项目中调所有接口就会在前面拼接上根路径
axios.defaults.baseURL = 'http://';
// 使用axios发送post请求时,设置默认请求头中Content-Type的值
axios.defaults.headers.post['Content-Type'] = 'application/json';
// 给请求头加一个名为'Authorization'的参数,可以用于设置请求头带token验证
axios.defaults.headers.common['Authorization'] = 'Bearer YWMtknehLoJT2k_f7mlPoNgo';
(6)添加请求拦截器
发送请求之前执行
// 添加请求拦截器
axios.interceptors.request.use(
config => {
// 发送请求前要做的事
console.log('发送请求前');
console.log(config);
return config;
},
error => {
return Promise.reject(error);
});
(7)添加响应拦截器
在被 then 或者 catch 处理之前执行,在调接口以后then 或 catch 处理中拿到的数据是,在响应拦截器中,return 的内容
// 添加响应拦截器
axios.interceptors.response.use(
response => {
// 对拿到的响应数据做些事
console.log(response.config.url);
console.log(response.data);
return response.data;
},
error => {
return Promise.reject(error);
}
);
更多推荐
已为社区贡献15条内容
所有评论(0)