axios请求拦截和响应拦截

Axios的请求拦截器和响应拦截器都是非常有用的工具,它们可以在请求发送到服务器之前或响应返回到客户端之前进行干预。

请求拦截器:

请求拦截器是在发送请求之前执行的,可以在请求拦截器中对请求进行一些预处理,比如设置统一的请求头、添加请求体验证等。在axios中,可以通过axios.interceptors.request.use()方法来定义请求拦截器。例如:

axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

在上面的例子中,第一个函数是处理成功的请求,第二个函数是处理错误的请求。可以在第一个函数中添加一些公共的请求头,或者对请求体进行一些验证。

响应拦截器:

响应拦截器是在服务器响应返回到客户端之前执行的,可以在响应拦截器中对响应进行一些处理,比如根据响应的状态码进行一些特殊处理。在axios中,可以通过axios.interceptors.response.use()方法来定义响应拦截器。例如:

axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

在上面的例子中,第一个函数是处理成功的响应,第二个函数是处理错误的响应。可以在第一个函数中对响应数据进行一些处理,比如统一的数据格式化等。

需要注意的是,每个请求拦截器和响应拦截器都有两个配置项,一个是成功配置,一个是错误配置。成功配置是在请求成功或响应成功时执行的,错误配置是在请求或响应失败时执行的。可以根据需要进行相应的配置。

请求拦截:

 const instance =axios.create({
            baseURL:'xxx',
            timeout:5000
        })
        console.log(instance);
        
        instance.interceptors.request.use(config=>{

            console.log(config);
            //统一携带token
            if(config.url!='/user.login'){
                config.headers['Authorization'] = localStorage.getItem('token')
            }
            return config
        },error=>{
            return Promise.reject(error)
        })

响应拦截器:

instance.interceptors.response.use(response=>{
            return response.data
        },error=>{
            return Promise.reject(error)
        })

封装get方法:

function get (url,params){
            return axios.get(url,{
                params
            })
        }

封装post方法:

function post(){
            return axios.post(url,data)
        }

  • 6
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值