【vue2】axios请求与axios拦截器的使用详解
<template>
<div>
<h1>用户列表</h1>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
users: []
};
},
created() {
this.fetchUsers();
},
methods: {
fetchUsers() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.users = response.data;
})
.catch(error => {
console.error('请求用户列表失败:', error);
});
}
}
};
</script>
这个例子展示了如何在Vue组件中使用axios来发送HTTP GET请求,并在请求成功后更新组件的数据。同时,它也演示了如何在axios请求中处理可能发生的错误。这个例子是基于Vue 2和axios进行网络请求的典型用法。
评论已关闭