在 Vue.js 的前端开发中，通常需要和后端进行数据交互。作为一种轻量级的、基于 Promise 的 Ajax 库，axios 在实现前后端数据交互方面更加简便和便捷。本文将介绍使用 Vue.js 和 axios 进行前后端数据交互的方法和技巧，并结合示例代码详细讲解。
安装 axios
首先需要安装 axios：
npm install axios基本使用
使用 axios 可以发送 GET、POST、PUT、DELETE 等请求。下面介绍一下 axios 常用的方法。
GET 请求
通过以下代码可以发送 GET 请求：
axios.get('/api/users') .then(response => { console.log(response) }) .catch(error => { console.log(error) })
在实际项目中，一般是在组件的 created 钩子函数中发送请求并获取数据，例如：
-- -------------------- ---- ------- ------ ------- - ------ - ------ - ------ -- - -- --------- - ----------------------- -------------- -- - ---------- - ------------- -- ------------ -- - ------------------ -- - -展开代码
此时，我们通过发送 GET 请求获取了 /api/users 的数据，并赋值给了组件的 data 数据 users 中。
POST 请求
通过以下代码可以发送 POST 请求：
-- -------------------- ---- ------- ------------------------ - ----- ------ ---- --- -- -------------- -- - --------------------- -- ------------ -- - ------------------ --展开代码
PUT 请求
通过以下代码可以发送 PUT 请求：
-- -------------------- ---- ------- ------------------------- - ----- ------ ---- --- -- -------------- -- - --------------------- -- ------------ -- - ------------------ --展开代码
DELETE 请求
通过以下代码可以发送 DELETE 请求：
axios.delete('/api/users/1') .then(response => { console.log(response) }) .catch(error => { console.log(error) })
配置 axios
axios 配置有两种方式：全局配置和局部配置。
全局配置
使用以下代码可以全局配置 axios：
axios.defaults.baseURL = 'https://www.example.com/api' axios.defaults.timeout = 5000 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
以上代码将设置 axios 的请求基础 URL、超时时间以及请求头 Authorization。
局部配置
使用以下代码可以局部配置 axios：
axios({ baseURL: 'https://www.example.com/api', timeout: 5000, headers: { 'Authorization': AUTH_TOKEN } })
以上代码将在发送请求时使用局部的配置。
axios 拦截器
在使用 axios 进行数据交互时，经常需要对请求和响应进行拦截和处理，axios 提供了拦截器来实现这些功能。
请求拦截器
使用以下代码可以创建一个请求拦截器：
axios.interceptors.request.use(config => { console.log('请求拦截器触发') return config }, error => { console.log('请求出错:', error) return Promise.reject(error) })
此处使用了 axios 的请求拦截器来打印一些必要的信息。
响应拦截器
使用以下代码可以创建一个响应拦截器：
axios.interceptors.response.use(response => { console.log('响应拦截器触发') return response }, error => { console.log('响应出错:', error) return Promise.reject(error) })
此处使用了 axios 的响应拦截器来打印一些必要的信息。
示例代码
在示例代码中，我们使用 axios 和 Node.js 编写一个简单的 todo 应用程序。该应用程序使用了 MongoDB 作为数据库。首先安装所需的依赖：
npm install express mongoose body-parser cors
后端代码
-- -------------------- ---- ------- -- ------ ----- ------- - ------------------ ----- ---------- - ---------------------- ----- ---- - --------------- ----- -------- - ------------------- ----- ---- - ------------------------ ----- --- - --------- -------------------------- ---------------------------------------- -------- --------------- -------------------------------------------------- ----------------- ----- ------------------- ------ -------- -- - --------------- ------- ---- -- ------------ -- - --------------- ------- ----- ------ -- ---------------------- ----- ---- -- - ----- ---- - --- ------ ------ --------------- -- ----------------------- -- - ---------------- -------------- -- - --------------------------- -- -- --------------------- ----- ---- -- - ----------------------- -- - ---------------- -------------- -- - --------------------------- -- -- ---------------- -- -- - --------------------- --展开代码
// models/todo.js const mongoose = require('mongoose') const todoSchema = new mongoose.Schema({ title: String, }) module.exports = mongoose.model('Todo', todoSchema)
前端代码
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ------------------- ------- ------ ---- --------- ------------- ---- --- ----------- -- --------- ---------- ------- ----- ----- -------------------------- ------ ----------- ----------------- -- ------- -------------------------- ------- ------ ------- ------------------------------------------------ ------- --------------------------------------------------------- -------- --- ----- --- ------- ----- - ------ --- -------- --- -- -------- - --------- - ------------------------ - ------ ------------- -- -------------- -- - ------------------------------ ------------ - -- -- ------------ -- - ------------------ -- -- -- --------- - ----------------------- -------------- -- - ---------- - ------------- -- ------------ -- - ------------------ -- - -- --------- ------- -------展开代码
以上示例代码中，我们编写了一个简单的 todo 应用程序，该应用程序使用了 Vue.js 和 axios 进行前后端数据交互。在前端中，当用户添加一个新的 todo 时，我们发送一个 POST 请求到 /api/todos，并将添加的 todo 对象添加到组件的 data 数据 todos 中。在组件创建时，我们发送一个 GET 请求到 /api/todos，并将响应数据赋值给组件的 data 数据 todos 中，以显示所有 todo 列表。在后端中，我们接收到 POST 请求时，创建一个新的 todo 对象，并将其保存到 MongoDB 数据库中。获取列表时，我们从 MongoDB 数据库中查询 todo 对象并返回给前端。
总结
本文介绍了使用 Vue.js 和 axios 实现前后端数据交互的方法和技巧，并提供了示例代码以供参考。通过实践，我们可以更深入地理解 axios 在前端开发中的作用和应用。在实际项目中，我们要根据具体需求和场景选择合适的方法和技巧来完成数据交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654e00d27d4982a6eb757656
