详解Vue中使用Axios拦截器

需求是拦截前端的网络请求和相应。 废话不多说，直接上干货。 我用的是vue-cli3所以这个config文件是我自己创建的。 先介绍env.js //根据不同的环境更改不同的baseUrl let baseUrl = ''; //开发环境下 if (process.env.NODE_ENV == 'development') { baseUrl = ''; } else if (process.env.NODE_ENV == 'production') { baseUrl = '生产地址'; } export { baseUrl,//导出baseUrl 在这里我首先设置了开发 在Vue.js应用中，我们经常使用Axios库来处理HTTP请求。Axios提供了一种强大的方式来管理和定制我们的网络请求。本文将详细讲解如何在Vue中配置和使用Axios拦截器，以满足拦截前端网络请求和响应的需求。 我们需要在项目中引入Axios。在本文的例子中，开发者使用vue-cli3创建项目，并创建了一个`config`目录，其中包含`env.js`文件来设置基础URL（baseUrl）根据不同的环境。在`env.js`中，我们可以根据`process.env.NODE_ENV`变量判断当前环境是开发（development）还是生产（production），并据此设置不同的baseUrl。 ```javascript let baseUrl = ''; if (process.env.NODE_ENV == 'development') { baseUrl = '开发环境的URL'; } else if (process.env.NODE_ENV == 'production') { baseUrl = '生产环境的URL'; } export { baseUrl }; ``` 接着，我们创建一个`axios.js`文件，导入`baseUrl`、`axios`库以及`qs`库（用于处理POST请求的数据格式化）。同时，我们也引入了`vuex`，以便在拦截器中操作应用的状态。 ```javascript import { baseUrl } from "../config/env"; import axios from 'axios'; import qs from 'qs'; import vuex from '../src/store/index'; ``` 然后，我们创建一个Axios实例，设置基础URL、超时时间、跨域选项等。同时，我们将POST请求的默认Content-Type设置为`application/x-www-form-urlencoded;charset=UTF-8`。 ```javascript let service = axios.create({ baseURL: baseUrl, timeout: 20000, crossDomain: true, withCredentials: true }); ``` 接下来，我们添加请求拦截器和响应拦截器。请求拦截器通常用于在发送请求前进行预处理，如添加全局的请求头、显示加载提示等。在这个例子中，开发者使用了Vuex来管理状态，在发送请求前打开加载提示。 ```javascript service.interceptors.request.use((config) => { // 使用Vuex管理状态，例如显示加载提示 vuex.$store.commit('OPEN_LOADING'); // 判断请求方式并处理数据格式 if (config.method === 'post') { config.data = qs.stringify(config.data); } else { config.params = config.params; } return config; }, (error) => { return Promise.reject(error); }); ``` 响应拦截器用于处理服务器返回的结果。我们可以在这里处理错误，例如根据HTTP状态码整理错误信息。 ```javascript service.interceptors.response.use((response) => { return response.data; }, (error) => { let info = {}; const { status, statusText, data } = error.response; if (!error.response) { info = { code: 5000, msg: 'Network Error' }; } else { info = { code: status, data, msg: statusText }; } return Promise.reject(info); }); ``` 将创建的axios实例导出，并在`main.js`中引入并挂载到Vue实例上，这样在整个应用中都可以使用这个配置好的Axios实例。 ```javascript import axiosService from './axios'; Vue.prototype.$axios = axiosService; ``` 总结来说，Vue中使用Axios拦截器的主要步骤包括： 1. 配置基础URL，根据环境切换不同地址。 2. 创建Axios实例并设置相关配置。 3. 添加请求拦截器，处理请求前的逻辑，如显示加载提示、数据格式化等。 4. 添加响应拦截器，处理响应后的逻辑，如错误处理、数据解析等。 5. 在主文件中引入并挂载Axios实例，使其在全局可用。 通过这种方式，我们可以统一处理所有网络请求，提高代码的可维护性和用户体验。记住，使用拦截器可以有效地解决一些共性问题，但也要注意不要过度依赖，保持代码的简洁性和可读性。