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)
        }

你可能感兴趣的:(javascript,前端,vue.js,axios)