请求拦截

在请求发起之前和请求完成之后进行某些操作(比如loading效果);
在发送请求之前添加上loading效果,在请求成功和失败的时候都关闭loading

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
请求拦截器是一种在发送请求之前拦截请求并对其进行处理的机制。在前端开发中,常见的使用场景是在发送 AJAX 请求时为每个请求加上一些固定的请求头信息,如 token 等。请求拦截器可以在发送请求之前拦截请求并添加额外的请求头信息,从而实现在所有请求中添加相同的请求头信息的目的。 在 Vue.js 中,可以使用 axios 拦截器来实现请求拦截器。axios 是一个基于 Promise 的 HTTP 请求库,可以用于浏览器和 Node.js 环境中。axios 提供了一个拦截器机制,可以在发送请求或接收响应之前对其进行拦截处理。 具体实现方法如下: ```javascript import axios from 'axios'; // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 config.headers.Authorization = 'Bearer ' + getToken(); // 添加 token 请求头信息 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 发送请求 axios.get('https://api.example.com/user/12345') .then(function (response) { // 处理响应数据 }) .catch(function (error) { // 处理请求错误 }); ``` 在上述代码中,我们使用 `axios.interceptors.request.use()` 方法来添加请求拦截器。该方法接收一个回调函数,该函数会在发送请求之前被调用。在这个回调函数中,我们可以对请求进行一些处理,比如添加请求头信息。最后需要返回处理后的 `config` 对象,以便 axios 知道应该如何继续处理这个请求。 当我们发送请求时,axios 会自动调用添加的请求拦截器,对请求进行处理,然后再发送请求。在请求完成后,axios 会将响应数据返回给我们,我们可以在 `then()` 方法中处理响应数据,或在 `catch()` 方法中处理请求错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值