在前端开发过程中，我们常常需要与服务器端进行数据交互，获取或发送数据。Vue.js 是一个流行的前端框架，可以方便地进行数据绑定和组件化开发。而在 Vue.js 中，可通过 axios 库来进行数据请求和响应处理。在本文中，我们将详细介绍 Vue.js 使用 axios 请求数据的方法及其注意事项，并提供相关示例代码。
什么是 axios？
axios 是一个基于 Promise 的 HTTP 请求库，可以用于浏览器端和 Node.js 环境的 HTTP 客户端。它可以自动转换 JSON 数据，并支持请求/响应拦截器、取消请求、多个并发请求等功能。在 Vue.js 中，axios 库被广泛地应用于数据交互的处理中。
如何使用 axios 发起请求？
在 Vue.js 中，通过安装 axios 库并在 Vue 实例中引入 axios 模块，即可使用 axios 发起 HTTP 请求。下面是一个示例代码：
// www.javascriptcn.com code example
<template>
<div>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.title }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
todos: []
}
},
mounted() {
axios
.get('https://jsonplaceholder.typicode.com/todos')
.then(response => {
this.todos = response.data;
})
.catch(error => {
console.log(error);
});
}
}
</script>在上面的代码中，我们使用 axios 发起了一个 GET 请求，该请求获取了 https://jsonplaceholder.typicode.com/todos 接口的数据，并将数据渲染到模板中。在 mounted 钩子函数中，我们使用 axios 的 get 方法，传入请求的 URL，并在 then 语句块中将获取到的数据赋值给组件中的 todos 变量。
常见注意事项
使用 axios 发起请求时，需要注意以下几点：
- 跨域请求问题：在请求 URL 和当前页面 URL 不同源的情况下，浏览器会限制该请求，这时需要后端设置跨域访问权限。可在 Axios 默认配置中设置
withCredentials: true来处理跨域请求。 - 请求超时处理：可以通过
timeout属性设置请求的超时时间，当请求时间超出该时间后，请求会被取消并触发timeout错误。 - 请求拦截器和响应拦截器：可以在 Axios 的默认配置中添加请求拦截器和响应拦截器，以实现请求和响应的处理和重试等。
- 取消请求：可以通过创建 CancelToken 来取消请求，以避免在页面离开或用户取消操作时仍然向服务器发送请求。
示例代码
下面我们来看一个完整的示例代码，该代码实现了对某一本书籍的添加、删除和修改操作：
// www.javascriptcn.com code example
<template>
<div>
<h1>Books</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>
<button @click="onEdit(book)">Edit</button>
<button @click="onDelete(book)">Delete</button>
</td>
</tr>
</tbody>
</table>
<div>
<h2>{{ isNew ? 'Add Book' : 'Edit Book' }}</h2>
<form @submit.prevent="onSubmit">
<div>
<label>Title:</label>
<input type="text" v-model="form.title" />
</div>
<div>
<label>Author:</label>
<input type="text" v-model="form.author" />
</div>
<div>
<button type="submit">{{ isNew ? 'Add' : 'Save' }}</button>
<button type="reset" @click="onCancel">Cancel</button>
</div>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
books: [],
form: { title: '', author: '' },
isNew: true,
selected: null
}
},
mounted() {
this.loadBooks();
},
methods: {
loadBooks() {
axios
.get('https://example.com/api/books')
.then(response => {
this.books = response.data;
})
.catch(error => {
console.log(error);
});
},
onAdd() {
this.isNew = true;
this.form.title = '';
this.form.author = '';
},
onEdit(book) {
this.isNew = false;
this.form.title = book.title;
this.form.author = book.author;
this.selected = book;
},
onSubmit() {
if (this.isNew) {
axios
.post('https://example.com/api/books', this.form)
.then(response => {
this.loadBooks();
})
.catch(error => {
console.log(error);
});
} else {
axios
.put(`https://example.com/api/books/${this.selected.id}`, this.form)
.then(response => {
this.loadBooks();
})
.catch(error => {
console.log(error);
});
}
this.onCancel();
},
onDelete(book) {
if (confirm('Are you sure to delete this book?')) {
axios
.delete(`https://example.com/api/books/${book.id}`)
.then(response => {
this.loadBooks();
})
.catch(error => {
console.log(error);
});
}
},
onCancel() {
this.isNew = true;
this.form.title = '';
this.form.author = '';
this.selected = null;
}
}
}
</script>在上面的代码中，我们实现了一个 Books 组件，该组件可以对后端某个 API 的图书数据进行增删改查操作。使用 axios 发起请求时，我们需要注意跨域请求问题、超时处理等常见问题，并结合组件的生命周期函数和方法对请求结果进行处理。总体而言，使用 axios 请求数据的方法是非常强大和灵活的，可帮助我们快速地完成前端开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d5cc1da941bf7134b0be5e