axios的请求拦截和响应拦截

本文介绍了在Vue项目中如何封装axios,以实现代码维护和效率提升。详细讲解了创建axios实例的过程,以及封装带来的好处,如减少重复请求。同时,文章重点讨论了axios的请求拦截和响应拦截的使用,特别是如何处理请求头中的token问题,通过实例分析和解决了一次错误,提高了团队的解决问题能力。
摘要由CSDN通过智能技术生成

1.安装axios

npm install axios --save

2.引入模块

在untils文件夹中创建request.js文件,引入axios模块

import axios from "axios";

3.创建axios实例

// 引入axios
import axios from 'axios'
// 引入提示消息组件
import { Message } from 'element-ui'
const _axios = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})

axios封装的好处:

1、方便后期代码的维护,

2、减少代码量,减少不必要的重复请求响应,

3、通过配合async await,让代码更加优雅

把在vue中如何将axios进行封装给说了一下;

并且把请求拦截和响应拦截,以及请求头携带token给说了一下,老大讲的也是很细致,中间的话,是因为拦截那块token处理的有点的问题,导致只要以获取到数据列表token值就变为undefined,然后讲过一步步的分析,找到了问题,最后也是解决了,这样的话也对我们也是有提升的,让我们知道下次遇到这种情况时候知道怎么处理了

axios的封装处理

import axios from 'axios'
import { Message } from 'element-ui' // Message===this.$message
import Store from &
axios请求拦截器在发送请求之前会拦截请求,并可以对请求进行一些处理。在这个例子中,我们可以看到拦截器的配置在引用中的`http.interceptors.request.use`函数中完成。该函数接受一个参数`config`,代表当前要发送的请求的配置。在这个函数中,我们可以根据需要对请求进行一些逻辑判断。 首先,我们可以看到在这个拦截器中定义了一个数组`noLanJie`,它包含了一些不需要被拦截请求地址。如果请求的地址在这个数组中存在,那么就直接放行,不做任何处理。 如果请求的地址不在`noLanJie`数组中,那么就是需要被拦截请求。在这个例子中,拦截器会从本地存储中获取到一个名为`token`的值,并将它添加到请求请求头中的`authorization`字段中。这样,在发送请求时,会将这个`token`作为身份验证信息携带到后端。最后,拦截器需要返回`config`对象,以便让请求继续发送。 总结起来,axios请求拦截器可以在发送请求之前对请求进行一些处理,例如添加请求头信息等。拦截器可以根据请求的配置进行逻辑判断,决定是否拦截请求并进行处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [axios请求拦截器的配置](https://blog.csdn.net/qq_44603011/article/details/123121764)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue axios登录请求拦截器](https://download.csdn.net/download/weixin_38655810/13194829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [axios全局拦截+请求响应处理+路由拦截](https://blog.csdn.net/weixin_42484657/article/details/122365109)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值