axios请求拦截器和响应拦截器

  <button>发送请求</button>

<script>

    let btn = document.querySelectorAll("button")[0];

    // 给默认实例添加请求拦截器

    // 这样写,相当于,这个拦截器什么也没有做

    // axios.interceptors.request.use(config => {

    //     return config;

    // })

    // 所谓的做一些事,就是做一些配置

    axios.interceptors.request.use(config => {

        config.headers.Authorization = `fsadfsadf6789f87s6adf68asodfihasjkdfasdf7678fasd67f8asdfas`;

        NProgress.start(); // 显示进度条

        return config;

    }, err => {

        // 失败的回调,直接响应失败的promsie

        return Promise.reject(err)

    })

    axios.interceptors.response.use(response => {

        NProgress.done(); // 关闭进度条

        return response.data; // 仅仅把data过滤出来

    }, err => {

        // 失败的回调,直接响应失败的promsie

        return Promise.reject(err)

    })

    btn.onclick = function() {

        axios.get("http://httpbin.org/delay/5").then(res => {

            console.log(res);

        })

    }

</script>

### 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响应的状态检测,在这种情况下它会触发一次异步操作去更新过期的身份验证令牌,并再次提交原始请求直到成功为止或达到最大次数限制。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值