vue axios请求拦截实例代码

Vue Axios 请求拦截是一种在发送HTTP请求前和接收响应后执行特定操作的技术，它可以用来统一处理全局的错误，添加额外的请求头，或者在特定条件下取消请求。在Vue项目中，Axios是一个常用的HTTP库，它提供了拦截器机制，使得我们可以方便地对请求和响应进行预处理。 我们来看一下如何在Vue项目中安装和引入Axios： ```bash # 使用npm安装axios npm install axios ``` 然后，在Vue组件或全局设置中引入Axios： ```javascript import axios from 'axios'; ``` 接下来，我们重点讨论请求拦截器和响应拦截器的配置： **请求拦截器（Request Interceptor）**： 请求拦截器是在发送请求之前被调用的，可以用来修改请求配置，比如设置超时时间、基础URL，或者添加认证信息等。以下是一个例子： ```javascript axios.interceptors.request.use( config => { // 获取用户token，例如从cookie中 const token = Cookies.get('user') ? JSON.parse(Cookies.get('user')).token : ''; // 设置请求头 config.headers['Content-Type'] = 'application/json'; // 如果存在token，将其添加到请求头 if (token) { config.headers.token = token; } return config; }, error => { // 错误处理，例如返回Promise.reject(err) return Promise.reject(error); } ); ``` **响应拦截器（Response Interceptor）**： 响应拦截器是在接收到服务器响应之后被调用的，通常用于处理服务器返回的状态码和错误信息。例如，如果服务器返回未登录状态，我们可以自动重定向到登录页面： ```javascript axios.interceptors.response.use( response => { // 检查错误代码，例如'W_100004'表示未登录 if (response.data.code === 'W_100004' || response.data.message === '用户未登录或登录超时，请登录！') { // 重定向到登录页面 router.push({ path: "/", query: { redirect: router.currentRoute.fullPath } // 记录跳转来源 }); } return response; }, error => { // 错误处理，例如返回Promise.reject(error) return Promise.reject(error); } ); ``` 封装GET和POST请求的方法： ```javascript // 封装GET请求 export function fetch(url, params = {}) { return new Promise((resolve, reject) => { axios.get(url, { params }) .then(response => { resolve(response.data); }) .catch(err => { reject(err); }); }); } // 封装POST请求 export function post(url, data = {}) { return new Promise((resolve, reject) => { axios.post(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }); }); } ``` 以上代码展示了如何在Vue项目中使用Axios进行请求和响应拦截，以及如何封装通用的GET和POST请求方法。通过这种方式，你可以实现诸如身份验证、错误处理、请求取消等全局逻辑，提高代码的复用性和可维护性。