【无标题】axios请求拦截器中的config

在 Axios 中,拦截器函数 axios.interceptors.request.use() 接收一个函数作为参数,这个函数有一个参数 configconfig 是一个包含请求配置的对象,比如请求头、请求体、URL 等信息。

axios.interceptors.request.use(config => {
  // 为请求头对象添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

这个拦截器函数允许你在请求发送之前修改请求配置。通过操作 config 对象,你可以设置请求头、修改请求体内容、设置请求的 URL 等等。在上面的代码中,对 config.headers.Authorization 的设置就是为了向请求头添加身份验证所需的 token。

因此,通过拦截器的方式,在每个请求发送之前,可以动态地在请求配置中设置一些参数,这对于需要在每个请求中添加类似身份验证信息、请求头等信息的情况非常有用。

### Axios 请求拦截器使用方法 #### 创建 Axios 实例并设置默认配置 为了更好地管理和定制 HTTP 请求,通常会先创建一个 Axios 实例,并为其设定一些通用的选项,比如基础 URL 或者超时时间等。 ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 1000, }); ``` #### 添加请求拦截器 请求拦截器允许在实际发起网络请求之前修改请求配置。这可以用来添加认证令牌、调整请求参数或是执行其他预处理逻辑。 ```javascript instance.interceptors.request.use( function(config) { // 在发送请求之前做一些事情 const token = localStorage.getItem('authToken'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, function(error) { // 处理请求错误 return Promise.reject(error); } )[^5]; ``` 上述代码展示了如何利用请求拦截器向每个请求自动附加授权头部信息。如果本地存储中有有效的身份验证令牌,则将其加入到请求头中以便服务器端识别用户身份[^3]。 #### 错误重试机制 除了简单的前置处理外,还可以实现更复杂的业务需求,例如当遇到特定类型的失败(如未登录状态码)时尝试重新获取新的访问凭证后再重发请求: ```javascript let isRefreshing = false; instance.interceptors.response.use(undefined, async function (error) { const originalRequest = error.config; if ( error.response.status === 401 && !originalRequest._retry ) { if (!isRefreshing) { isRefreshing = true; try { await refreshAccessToken(); // 自定义函数用于刷新access_token originalRequest.headers['Authorization'] = 'Bearer ' + getNewAccessToken(); isRefreshing = false; return instance(originalRequest); } catch (_error) { isRefreshing = false; throw _error; } } originalRequest._retry = true; return new Promise((resolve, reject) => { setTimeout(() => { resolve(instance(originalRequest)); }, 500); }); } return Promise.reject(error); })[^1]; ``` 这段脚本实现了对于HTTP 401 Unauthorized响应的状态检测,在这种情况下它会触发一次异步操作去更新过期的身份验证令牌,并再次提交原始请求直到成功为止或达到最大次数限制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值