Axios 是一款基于 Promise 的 HTTP 库，它可用于浏览器和 Node.js 环境中发送 HTTP 请求。Vue.js 是一款流行的前端框架，它提供了一种简单的方式来构建用户界面。在 Vue.js 应用程序中，通常需要向后端服务器发送请求来获取数据或提交表单。Axios 是一个常用的 HTTP 库，它可以轻松地与 Vue.js 集成。本文将介绍如何在 Vue.js 中使用 Axios 拦截器对请求进行预处理的方法和技巧。
什么是 Axios 拦截器？
Axios 拦截器是一种机制，它允许在发送请求或响应之前或之后，对请求或响应进行处理。Axios 拦截器可以用于添加请求头、验证请求数据、处理错误等。Axios 拦截器是 Axios 库的一个重要特性，它提供了一个灵活的方式来处理 HTTP 请求和响应。
在 Vue.js 中使用 Axios 拦截器的方法
在 Vue.js 中使用 Axios 拦截器，需要创建一个 Axios 实例，并使用该实例发送 HTTP 请求。可以通过以下方式创建 Axios 实例：
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://example.com/api',
timeout: 10000,
headers: { 'Content-Type': 'application/json' },
});在这个例子中，我们创建了一个名为 instance 的 Axios 实例，并指定了基本 URL、超时时间和请求头。接下来，我们可以使用 instance 发送 HTTP 请求。
在 Vue.js 中，可以在组件的 created 钩子中使用 Axios 实例发送 HTTP 请求。例如：
// javascriptcn.com 代码示例
export default {
name: 'MyComponent',
created() {
instance.get('/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
},
};这个例子中，我们在 MyComponent 组件的 created 钩子中使用 instance 发送一个 GET 请求，并在响应中打印返回的数据。如果出现错误，我们将错误打印到控制台上。
现在，我们可以通过使用 Axios 拦截器来对请求进行预处理。
使用 Axios 拦截器预处理请求的方法和技巧
使用 Axios 拦截器预处理请求，可以在请求发送之前对请求进行修改或添加一些额外的信息。下面是一个使用 Axios 拦截器预处理请求的例子：
instance.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
return config;
});在这个例子中，我们使用 Axios 实例的 interceptors 属性来添加一个请求拦截器。该拦截器将在请求发送之前被调用。在该拦截器中，我们可以修改请求的配置，例如添加请求头。在这个例子中，我们添加了一个名为 Authorization 的请求头，并将其设置为从本地存储中获取的令牌值。
我们也可以在请求拦截器中对请求进行验证。例如，我们可以检查请求数据是否有效，并在无效时抛出一个错误：
instance.interceptors.request.use(config => {
if (!config.data) {
throw new Error('Request data is required');
}
return config;
});在这个例子中，我们检查请求数据是否存在。如果请求数据不存在，我们抛出一个错误。这个错误会被 catch 代码块捕获，然后我们可以处理这个错误。
我们还可以在请求拦截器中添加一个加载状态，以便在发送请求时显示一个加载指示器：
// javascriptcn.com 代码示例
instance.interceptors.request.use(config => {
store.commit('setLoading', true);
return config;
});
instance.interceptors.response.use(response => {
store.commit('setLoading', false);
return response;
}, error => {
store.commit('setLoading', false);
return Promise.reject(error);
});在这个例子中，我们使用 Vuex 存储库来管理状态。在请求拦截器中，我们调用 store.commit('setLoading', true) 来设置加载状态为 true。在响应拦截器中，我们调用 store.commit('setLoading', false) 来设置加载状态为 false。如果请求出现错误，我们使用 Promise.reject(error) 来拒绝该请求，并将错误传递给 catch 代码块。
总结
Axios 是一款流行的基于 Promise 的 HTTP 库，它可以轻松地与 Vue.js 集成。Axios 拦截器是 Axios 库的一个重要特性，它提供了一个灵活的方式来处理 HTTP 请求和响应。在 Vue.js 中，我们可以通过使用 Axios 拦截器来对请求进行预处理。我们可以使用 Axios 拦截器来添加请求头、验证请求数据、处理错误等。使用 Axios 拦截器可以让我们更好地管理 HTTP 请求和响应，并提高应用程序的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6552d879d2f5e1655dc899b5