axios全局配置与拦截器实现

"本文档介绍了如何使用axios进行全局请求参数设置以及如何配置请求和响应拦截器，主要应用于处理每个请求中需要携带的通用参数（如token、时间戳）和对返回状态的判断（如检查token是否过期）" 在前端开发中，axios是一个广泛使用的HTTP库，用于发起网络请求。在某些情况下，我们可能需要在每个请求中添加一些固定的参数，如身份验证的token或者服务器要求的时间戳。同时，为了统一处理服务器返回的数据或错误，我们可以利用axios的拦截器功能。 axios的全局请求参数设置通常在应用初始化时完成。通过`axios.interceptors.request.use`方法，我们可以定义一个函数来修改请求配置（config）。以下是一个示例： ```javascript axios.interceptors.request.use( function(config) { var xtoken = getXtoken(); // 假设getXtoken()用于获取token if (xtoken != null) { config.headers['X-Token'] = xtoken; // 将token添加到请求头 } if (config.method === 'post') { config.data = { ...config.data, // 使用扩展运算符合并原有数据与新添加的_t字段 _t: Date.parse(new Date()) / 1000, // 添加当前时间戳 }; } else if (config.method === 'get') { config.params = { ...config.params, // 对于GET请求，将_t添加到查询参数 _t: Date.parse(new Date()) / 1000, }; } return config; }, function(error) { return Promise.reject(error); } ); ``` 这个示例中，我们在请求拦截器中检查并添加了`X-Token`头，并根据请求方法（POST或GET）将时间戳 `_t` 添加到请求数据或查询参数中。 响应拦截器则用于处理服务器返回的数据和可能出现的错误。使用`axios.interceptors.response.use`，我们可以定义一个函数来处理响应。例如，如果返回的状态码表示token过期，我们可以清理本地存储的token并重定向到登录页面： ```javascript axios.interceptors.response.use( function(response) { // 检查返回状态码，如果为4（假设代表token过期），则清空localStorage并跳转到登录页面 if (response.data.code === 4) { localStorage.clear(); router.replace({ path: '/signin', query: { redirect: router.currentRoute.fullPath }, }); } return response; }, function(error) { // 可以在这里处理其他响应错误 return Promise.reject(error); } ); ``` 通过这种方式，我们可以确保每次请求都带有必要的参数，并且能够统一处理服务器返回的异常情况，提高了代码的可维护性和用户体验。记住，拦截器是异步的，因此要确保它们不会阻塞请求的执行。以上就是axios全局请求参数设置及拦截器的使用方法，它对于处理通用需求和错误处理非常有用。