在 Vue 中使用 Axios
最近在写前后端分离的项目,使用axios遇到了很多奇怪的错误,这篇文章用以记录axios常用的操作。
安装
引入
直接在main.js
里全局引入即可。
1 2 3 4
| import axios from 'axios' import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
|
使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <template> <div v-for="item in info" :key="item"> {{ item.title }} </div> </template>
<script> export default { name: "Demo", data() { return { info: {} }; }, mounted() { // POST 请求 this.axios.post('/api/login', { username: 'admin', password: '123456' }) .then(function (response) => { // 成功 this.info = response.data console.log(response); }) .catch(function (error) => { // 失败 console.log(error); }); // GET 请求 this.axios.get('/api/info') .then(function (response) { // 成功 this.info = response.data console.log(response); }) .catch(function (error) { // 失败 console.log(error); }); }; } </script>
|