Vue.js 与 RESTful API 集成之请求拦截器与响应拦截器

在现代前端开发中，将 Vue.js 与 RESTful API 集成时，使用请求拦截器和响应拦截器可以极大地提高开发效率和代码的可维护性。通过拦截器，我们可以在请求发送前和响应返回后统一处理各种任务，如添加认证头、处理错误等。本文将深入探讨如何在 Vue.js 中使用 Axios 的请求拦截器和响应拦截器，实现与 RESTful API 的高效集成。

一、基础概念与环境搭建

（一）Vue.js 简介

Vue.js 是一款渐进式 JavaScript 框架，用于构建用户界面。它通过声明式渲染和组件化开发，帮助开发者高效管理数据和 UI 同步。

（二）RESTful API 简介

RESTful API 基于 HTTP 协议，使用标准方法（如 GET、POST、PUT、DELETE）操作资源。每个资源有唯一 URI，客户端通过 HTTP 请求获取或修改资源状态。

（三）Axios 简介

Axios 是基于 promise 的 HTTP 库，适用于浏览器和 Node.js。它支持多种 HTTP 请求，可拦截请求和响应，自动转换 JSON 数据。

（四）环境搭建

使用 Vue.js 和 Axios 前，需搭建开发环境。用 Vue CLI 创建项目，再安装 Axios 依赖：

# 创建 Vue 项目
vue create my-project# 进入项目目录
cd my-project# 安装 Axios
npm install axios

二、请求拦截器

（一）基础用法

请求拦截器允许在请求发送前进行拦截，可以用于添加请求头、处理请求数据等。

// 添加请求拦截器
axios.interceptors.request.use(config => {// 在发送请求之前做些什么，比如添加认证头const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
}, error => {// 对请求错误做些什么return Promise.reject(error);
});

（二）处理请求参数

在请求拦截器中，可以统一处理请求参数，如添加公共参数、格式化数据等。

axios.interceptors.request.use(config => {// 添加公共参数if (config.method === 'post' && config.data) {config.data = {...config.data,appId: 'myApp',timestamp: new Date().getTime()};}return config;
});

（三）请求取消

在某些情况下，可能需要取消请求，如用户在请求完成前切换了页面。可以使用 Axios 的取消令牌来实现。

import axios from 'axios';
import CancelToken from 'axios.CancelToken';export default {data() {return {cancelToken: null};},methods: {fetchUsers() {// 如果已有请求，先取消if (this.cancelToken) {this.cancelToken.cancel('Operation canceled by the user.');}this.cancelToken = new CancelToken(canceler => {// 将 canceler 保存以便后续使用this.canceler = canceler;});axios.get('https://api.example.com/users', {cancelToken: this.cancelToken.token}).then(response => {console.log(response.data);}).catch(error => {if (axios.isCancel(error)) {console.log('Request canceled:', error.message);} else {console.error(error);}});}},beforeDestroy() {// 组件销毁时取消所有请求if (this.cancelToken) {this.cancelToken.cancel('Component destroyed.');}}
};

三、响应拦截器

（一）基础用法

响应拦截器允许在响应返回后进行拦截，可以用于处理响应数据、统一处理错误等。

// 添加响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做些什么return response;
}, error => {// 对响应错误做些什么，比如统一处理 401 错误if (error.response) {switch (error.response.status) {case 401:// 重定向到登录页router.push('/login');break;case 403:alert('您没有权限访问此资源');break;case 404:alert('资源未找到');break;case 500:alert('服务器内部错误');break;default:console.error(error);}}return Promise.reject(error);
});

（二）处理响应数据

在响应拦截器中，可以统一处理响应数据，如数据格式化、缓存数据等。

axios.interceptors.response.use(response => {// 缓存数据localStorage.setItem(`cache_${response.config.url}`, JSON.stringify(response.data));return response;
});

（三）重试机制

对于一些可重试的请求，可以在捕获错误后自动重试。

let isRetry = false;
axios.interceptors.response.use(response => {return response;
}, error => {if (error.response && error.response.status === 500 && !isRetry) {isRetry = true;return axios.request(error.config).then(response => {isRetry = false;return response;}).catch(error => {isRetry = false;return Promise.reject(error);});}return Promise.reject(error);
});

四、在 Vue.js 中集成请求和响应拦截器

（一）创建 API 服务

为了更好地组织代码，可以创建一个 API 服务模块，将所有的 API 请求封装在其中，并配置拦截器。

// src/api/index.js
import axios from 'axios';const api = axios.create({baseURL: 'https://api.example.com',timeout: 10000
});// 请求拦截器
api.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});// 响应拦截器
api.interceptors.response.use(response => {return response;
}, error => {if (error.response) {switch (error.response.status) {case 401:router.push('/login');break;case 403:alert('您没有权限访问此资源');break;case 404:alert('资源未找到');break;case 500:alert('服务器内部错误');break;default:console.error(error);}}return Promise.reject(error);
});export default api;

（二）在组件中使用 API 服务

在 Vue.js 组件中，可以导入 API 服务并使用其中的方法。

// src/components/UserList.vue
import api from '../api';export default {data() {return {users: [],isLoading: false,error: null};},methods: {async fetchUsers() {this.isLoading = true;this.error = null;try {const response = await api.get('/users');this.users = response.data;} catch (error) {this.error = error;} finally {this.isLoading = false;}}},mounted() {this.fetchUsers();}
};

（三）在模板中显示数据和错误信息

在模板中，可以根据数据的加载状态和错误信息来显示不同的内容。

<template><div><h1>User List</h1><div v-if="isLoading">Loading...</div><div v-else-if="error">Error: {{ error.message }}</div><ul v-else><li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.email }}</li></ul></div>
</template>