您现在的位置是:首页 >技术教程 >【三十天精通Vue 3】第二十五天 Vue3 与 Axios 后端数据交互网站首页技术教程
【三十天精通Vue 3】第二十五天 Vue3 与 Axios 后端数据交互
✅创作者:陈书予
🎉个人主页:陈书予的个人主页
🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区
🌟专栏地址: 三十天精通 Vue 3
文章目录
引言
Axios是一个流行的基于Promise的HTTP客户端,它可以在浏览器和Node.js中使用。Vue.js是一个流行的JavaScript框架,它提供了一套易于使用的API和工具来构建交互式UI。在Vue.js中使用Axios可以轻松地与服务器通信并获取数据。本篇文章将介绍如何在Vue3中使用Axios进行HTTP请求,并详细介绍Axios的安装、基本使用、配置项、拦截器、并发请求和取消请求。
一、Vue3 与 Axios 概述
Vue3是Vue.js的最新版本,它提供了一些新的功能和改进,例如Composition API、性能优化和TypeScript支持。Axios是一个流行的HTTP客户端,它提供了许多强大的功能,例如拦截器、并发请求和取消请求。Vue3和Axios可以很好地结合使用,以便在Vue3应用程序中轻松地进行HTTP请求和数据获取。
二、Axios 安装与基本使用
2.1 安装 Axios
在使用Axios之前,首先需要安装它。可以使用npm或yarn来安装Axios。在终端中运行以下命令:
npm install axios
或
yarn add axios
2.2 发送 GET 请求
使用Axios发送GET请求非常简单。可以使用Axios.get()方法来发送GET请求,并指定URL。例如,以下代码将使用Axios获取JSON数据:
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/todos')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
2.3 发送 POST 请求
使用Axios发送POST请求也非常简单。可以使用Axios.post()方法来发送POST请求,并指定URL和要发送的数据。例如,以下代码将使用Axios将数据发送到服务器:
import axios from 'axios';
axios.post('https://jsonplaceholder.typicode.com/todos', {
title: 'foo',
completed: false
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
2.4 发送 PUT 请求
使用Axios发送PUT请求也非常简单。可以使用Axios.put()方法来发送PUT请求,并指定URL和要发送的数据。例如,以下代码将使用Axios将数据更新到服务器:
import axios from 'axios';
axios.put('https://jsonplaceholder.typicode.com/todos/1', {
title: 'foo',
completed: true
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
2.5 发送 DELETE 请求
使用Axios发送DELETE请求也非常简单。可以使用Axios.delete()方法来发送DELETE请求,并指定URL。例如,以下代码将使用Axios从服务器删除数据:
import axios from 'axios';
axios.delete('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
三、Vue3 中使用 Axios 获取数据
3.1 使用 Axios 获取数据
在Vue3中使用Axios获取数据非常简单。可以使用Axios.get()方法来获取数据,并将其存储在Vue3组件的数据属性中。例如,以下代码将使用Axios获取JSON数据并将其存储在Vue3组件的todos数据属性中:
import axios from 'axios';
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
todos: []
});
axios.get('https://jsonplaceholder.typicode.com/todos')
.then(response => {
state.todos = response.data;
})
.catch(error => {
console.log(error);
});
return {
state
};
}
};
3.2 渲染数据
获取数据后,可以在Vue3组件中使用数据属性来渲染数据。例如,以下代码将使用Vue3的v-for指令来渲染todos数据属性中的所有待办事项:
<template>
<div>
<ul>
<li v-for="todo in state.todos" :key="todo.id">
{{ todo.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
state: Object
}
};
</script>
3.3 处理错误
在使用Axios获取数据时,可能会出现错误。例如,服务器可能返回错误的响应代码或请求可能超时。为了处理这些错误,可以使用Axios的.catch()方法来捕获错误并采取相应的措施。例如,以下代码将使用Axios获取JSON数据,如果出现错误,则将错误记录在控制台中:
import axios from 'axios';
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
todos: []
});
axios.get('https://jsonplaceholder.typicode.com/todos')
.then(response => {
state.todos = response.data;
})
.catch(error => {
console.log(error);
});
return {
state
};
}
};
四、Axios 配置项详解
Axios提供了许多配置项,可以根据需要进行配置。以下是Axios配置项的详细说明:
4.1 baseURL
baseURL是在发出请求时将自动添加到URL前面的基本URL。例如,如果将baseURL设置为https://api.example.com,则在发送请求时,Axios将自动将https://api.example.com添加到请求的URL前面。以下是如何设置baseURL:
axios.defaults.baseURL = 'https://api.example.com';
4.2 表头
headers是一个包含请求头的对象。以下是如何设置headers:
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
4.3 参数
params是一个包含请求参数的对象。以下是如何设置params:
axios.get('/user', {
params: {
ID: 12345
}
})
4.4超时
timeout是请求超时的毫秒数。如果请求在超时时间内没有完成,则会被取消。以下是如何设置timeout:
axios.get('/user', {
timeout: 1000
})
4.5 withCredentials
withCredentials是一个布尔值,用于指定是否发送凭据(例如cookie或授权标头)的标志。如果要发送凭据,则将其设置为true。以下是如何设置withCredentials:
axios.defaults.withCredentials = true;
4.6 响应类型
responseType是请求的响应类型。以下是如何设置responseType:
axios.get('/user', {
responseType: 'json'
})
4.7 transformRequest 和 transformResponse
transformRequest
和 transformResponse
是两个配置项,它们的值是一个数组或者是一个函数。其中 transformRequest
允许你在将请求数据发送到服务器之前对其进行修改,这只适用于请求方法 put
、post
和 patch
。如果值是数组,则数组中的最后一个函数必须返回一个字符串或者一个 Buffer,否则将抛出一个错误。transformResponse
允许你在传递给 then/catch 前,修改响应数据。它也可以是一个数组或者是一个函数。如果值是数组,则数组中的每个函数都将被调用。
4.8 xsrfCookieName 和 xsrfHeaderName
xsrfCookieName
和 xsrfHeaderName
是用于防止跨站请求攻击(XSRF)的配置项。xsrfCookieName
表示存储 XSRF 令牌的 cookie 的名称,xsrfHeaderName
表示将 XSRF 令牌添加到 HTTP 头中的名称。默认情况下,Axios 将使用 XSRF-TOKEN
作为 cookie 的名称,并使用 X-XSRF-TOKEN
作为 HTTP 头的名称。
4.9 验证状态
validateStatus
是一个函数,用于确定是否应该解析响应。如果该函数返回 true
,则解析响应,否则将拒绝响应。默认情况下,Axios 将解析所有响应。以下是一个示例:
axios.get('https://jsonplaceholder.typicode.com/todos', {
validateStatus: function (status) {
return status < 500; // Reject only if the status code is greater than or equal to 500
}
})
这将拒绝所有状态码大于等于 500 的响应。
五、Axios 拦截器详解
Axios 提供了请求和响应拦截器,它们允许您在请求和响应被发送或接收之前,对它们进行拦截和修改。以下是拦截器的详细说明:
5.1 请求拦截器
请求拦截器允许您在请求被发送之前,对其进行拦截和修改。以下是一个示例:
axios.interceptors.request.use(function (config) {
// Do something before request is sent
config.headers['Authorization'] = 'Bearer ' + getToken();
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
在这个例子中,我们添加了一个请求拦截器,它将在每个请求上添加一个 Authorization
头。
5.2 响应拦截器
响应拦截器允许您在接收到响应之前,对其进行拦截和修改。以下是一个示例:
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
在这个例子中,我们添加了一个响应拦截器,它将在每个响应上执行一些操作。
六、Axios 并发请求详解
6.1 同时发送多个请求
Axios提供了axios.all()
和axios.spread()
两个方法用于处理并发请求,可以实现在多个请求都完成后再执行一些逻辑。
axios.all()
方法接收一个可迭代的对象作为参数,该对象中的每个元素都是一个Promise对象,返回一个新的Promise对象,当所有Promise对象都成功时,新的Promise对象才会成功。
例如,以下代码同时发送两个GET请求,当两个请求都成功时,输出两个请求的响应数据:
axios.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(axios.spread((response1, response2) => {
console.log(response1.data);
console.log(response2.data);
}))
.catch(error => {
console.log(error);
});
axios.spread()
方法接收一个回调函数作为参数,该函数的参数是一个数组,数组中的每个元素是一个请求的响应数据。在axios.all()
方法的then()
方法中使用axios.spread()
方法可以将响应数据拆分开来,方便处理。
6.2 执行顺序
在并发请求中,Axios默认使用的是同时发送多个请求的方式,而不是按照发送请求的顺序依次发送请求。
如果需要按照发送请求的顺序依次发送请求,可以使用axios.all()
方法的返回值按顺序处理请求的响应数据。例如,以下代码按照发送请求的顺序依次输出响应数据:
axios.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => {
console.log(error);
});
七、Axios 取消请求详解
7.1 为什么需要取消请求
在实际开发中,有时需要取消正在进行的请求,例如用户在输入框中连续输入,每次输入都会发送一个请求,如果不及时取消之前的请求,会导致请求过多,浪费网络资源和服务器资源。
7.2 取消请求的方法
Axios提供了CancelToken
和cancel
两个方法用于取消请求。CancelToken
是一个工厂函数,用于创建取消令牌,cancel
方法用于取消请求。
以下是使用CancelToken
和cancel
方法取消请求的示例代码:
import axios from 'axios';
const source = axios.CancelToken.source();
axios.get('https://jsonplaceholder.typicode.com/todos', {
cancelToken: source.token
})
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
} else {
console.log(error);
}
});
source.cancel('Canceled by the user');
在以上代码中,使用axios.CancelToken.source()
方法创建一个CancelToken
对象和一个cancel
方法。将CancelToken
对象的token
属性作为请求的cancelToken
参数,当需要取消请求时,调用cancel
方法即可。
7.3 如何使用取消请求
在实际开发中,有时需要取消正在进行的请求,例如用户在输入框中连续输入,每次输入都会发送一个请求,如果不及时取消之前的请求,会导致请求过多,浪费网络资源和服务器资源。Axios提供了CancelToken
和cancel
两个方法用于取消请求。
以下是使用CancelToken
和cancel
方法取消请求的示例代码:
-
创建
CancelToken
对象和cancel
方法:const source = axios.CancelToken.source();
-
将
CancelToken
对象的token
属性作为请求的cancelToken
参数:axios.get('https://jsonplaceholder.typicode.com/todos', { cancelToken: source.token })
-
当需要取消请求时,调用
cancel
方法:source.cancel('Canceled by the user');
完整的代码示例:
import axios from 'axios';
const source = axios.CancelToken.source();
axios.get('https://jsonplaceholder.typicode.com/todos', {
cancelToken: source.token
})
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
} else {
console.log(error);
}
});
source.cancel('Canceled by the user');
在上面的代码中,使用axios.isCancel(error)
方法判断请求是否被取消,并输出相应的信息。
需要注意的是,在使用CancelToken
和cancel
方法取消请求时,需要在请求发送前调用source.token
,否则会抛出一个未定义的错误。同时,需要在请求结束后,取消CancelToken
对象和cancel
方法的引用,以避免内存泄漏。
八、Axios 封装和实践
8.1 封装 Axios
在实际项目中,我们通常需要对 Axios 进行封装,以便于统一处理请求的错误、请求头、请求参数等信息,同时也方便后期维护和更新。
以下是一个简单的 Axios 封装示例:
import axios from 'axios';
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
});
service.interceptors.request.use(
config => {
// 在请求发送前做一些处理
config.headers['Authorization'] = getToken();
return config;
},
error => {
// 处理请求错误
return Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
// 在响应数据返回前做一些处理
return response.data;
},
error => {
// 处理响应错误
return Promise.reject(error);
}
);
export default service;
在上述代码中,我们通过 axios.create()
方法创建了一个 Axios 实例,并设置了基本的 baseURL 和 timeout。同时,我们也添加了请求和响应拦截器,用于处理请求和响应的错误信息。
通过封装后的 Axios,我们可以在 Vue3 项目中使用以下方法进行 API 请求:
import request from '@/utils/request';
request({
url: '/user',
method: 'get',
params: {
id: 1
}
}).then(data => {
console.log(data);
}).catch(error => {
console.log(error);
});
8.2 实践案例
在 Vue3 项目中,我们可以通过封装后的 Axios 进行 API 请求,同时也可以将 Axios 的实例作为 Vue3 的插件进行注册,方便在 Vue3 组件中使用。
以下是一个简单的 Axios 插件示例:
import axios from 'axios';
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
});
service.interceptors.request.use(
config => {
// 在请求发送前做一些处理
config.headers['Authorization'] = getToken();
return config;
},
error => {
// 处理请求错误
return Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
// 在响应数据返回前做一些处理
return response.data;
},
error => {
// 处理响应错误
return Promise.reject(error);
}
);
const plugin = {
install: (app, options) => {
app.config.globalProperties.$axios = service;
}
};
export default plugin;
在上述代码中,我们通过 app.config.globalProperties.$axios
将 Axios 实例注入到了 Vue3 中,并将其作为全局属性进行使用。
在 Vue3 项目中,我们可以通过以下方法进行插件注册:
import axios from '@/plugins/axios';
createApp(App).use(axios).mount('#app');
在 Vue3 组件中,我们可以通过以下方法进行 API 请求:
export default {
mounted() {
this.$axios({
url: '/user',
method: 'get',
params: {
id: 1
}
}).then(data => {
console.log(data);
}).catch(error => {
console.log(error);
});
}
}
通过以上方法,我们可以在 Vue3 项目中方便地进行 API 请求,并且也方便后期维护和更新。