Axios请求 window.open本拦截直接走 catch方法 处理(IOS系统处理)

按照惯例,我们得先找一下 有没有已经解决的方法
然后 一顿搜索,发现全都是 Ctrl + C,Ctrl + V的 博客,
统统都是 如下方法: 连标点符号都没变,嘿,mdzz

//在axios发送之前就打开一个空白的新窗口

var newPage = window.open()

//如果这样写,打开的空白页上有标题,显示的是“无标题”

window.open('about:blank') 这样的话,标题上显示的是'about:blank'

//然后在axios的then回调里写入打开的url的地址

newPage.location.href = 'url'

//这样就解决了浏览器自动拦截的问题了

当然 上述 方法 成功了 66.7%,因为 浏览器和Android手机都可以了,唯独苹果手机不行,就是不走 then 方法去执行 newPage.location.href = ‘url’


这个时候 ,我的脑袋两个大
后来查找原因,猜想可能是 axios 的问题,可能是 ES6的问题,结果尝试以后都不是。0.0
最后 猜想可能是 ios 网页打开方式问题 定义的 var newPage = window.open() 其中 newPage 是没用的
这个时候 window 还在,但newPage 为nil,所以 最后的 修改方式 window.location.href = ‘./xxx.html’;如下:

let url = "https://xxx.xxxxx"
					window.open("about:blank")
					axios.post(url, {
							phone: self.mobile,
							password: self.password
						})
						.then(function(response) {
							if(response.data.code == "000") {
								window.location.href = './xxx.html';
							} else if(response.data.code == "001") {
								self.errorTip(response.data.msg);
							}
						})
						.catch(function(error) {
							self.errorTip("网络连接失败");
						});
### Axios 响应拦截器的使用方法 Axios 的响应拦截器可以通过 `axios.interceptors.response.use` 方法来定义。该方法接收两个参数:第一个是当请求成功时的回调函数,第二个是当请求失败时的错误处理函数。 以下是详细的说明以及代码示例: #### 定义成功的回调函数 在成功的回调函数中,可以对接收到的数据进行预处理或者附加逻辑操作。例如,在接收到数据后修改其内容或将额外的信息注入其中。 ```javascript // 成功的回调函数 axios.interceptors.response.use(function (response) { // 修改返回的数据结构或添加日志记录等功能 response.data = `${response.data} - modified by interceptor`; return response; }); ``` 此部分的功能可以根据实际需求扩展,比如解析特定字段、统一处理状态码等[^1]。 #### 定义失败的回调函数 对于失败的情况,则可以在错误处理函数中捕获异常并采取相应的措施,如重新登录、提示用户网络问题或是跳转至其他页面。 ```javascript // 错误的回调函数 axios.interceptors.response.use( undefined, function (error) { if (error.response && error.response.status === 401) { // 如果服务器返回未授权的状态码(401),则可能需要刷新令牌或其他动作 console.error('Token has expired or is invalid.'); window.location.href = '/login'; } return Promise.reject(error); } ); ``` 这里需要注意的是,如果希望阻止后续 promise 链继续运行,可返回一个新的被拒绝的 Promise 实例;反之亦然,若想让链路正常流转下去,也可以选择返回调整后的结果或者是原始的错误对象本身[^2]。 #### 综合实例展示 下面给出一个完整的综合应用案例,其中包括了对 token 过期情况下的特殊处理机制: ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', }); instance.interceptors.request.use((config) => { const token = localStorage.getItem('auth_token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { return Promise.reject(error); }); instance.interceptors.response.use((response) => { return response; }, async (error) => { const originalRequest = error.config; if (error.response.status === 401 && !originalRequest._retry) { originalRequest._retry = true; try { const rs = await axios.post('/refresh-token', {}); const accessToken = rs.data.accessToken; localStorage.setItem('auth_token', accessToken); axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`; originalRequest.headers['Authorization'] = `Bearer ${accessToken}`; return axios(originalRequest); } catch (_error) { if (_error.response && _error.response.status === 403) { localStorage.removeItem('auth_token'); window.location.href = '/login'; } return Promise.reject(_error); } } return Promise.reject(error); }); export default instance; ``` 上述代码片段展示了如何利用 Axios 拦截器实现自动化的 Token 刷新流程,并妥善管理认证失效的情形[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值