526互联

【JavaScript42】axios拦截器

发布时间 2023-08-12 23:18:59作者: Tony_xiao

在前端, 我们能看到有些网站会对每次请求都添加加密信息. 或者每次返回数据的时候, 都有解密逻辑. 那此时. 你思考. 不可能每次请求都要程序员去手动写加密逻辑.

axios提供了拦截器. 可以对每一个请求进行拦截. 并修改请求的内容.拦截器还可以对响应进行拦截. 并修改响应的数据.

    1. 请求的参数, 或者请求头里面有加密数据.
    1. 返回的数据, 或者返回的响应头里可能会有加密数据.
// 1. 请求拦截器
        // promise对象中的函数中两个参数. resolve和reject
        axios.interceptors.request.use(function(config){
            console.log("发请求之前");
            console.log("请求参数", config.data);
            // 对url进行调整
            config.url = config.url + "&md5=dddddddd";
            console.log(config);
            config.headers['qiao']= "jfkldsjaflkadjsklfjadslkf";
            console.log("发请求之前");
            return config; // 必须返回config
        });

        // 2. 响应拦截器.
        axios.interceptors.response.use(function(response){
            console.log("请求返回的数据是:");
            console.log(response); // 在这里可以完成数据解密.
            return response.data; // 这里返回给业务代码
        });

        $(function(){
            $("#btn").click(function(){
                // axios发的请求, 默认就是json
                axios.post("http://127.0.0.1:5000/axios_ajax?1=1", {uname: 'qiao', age: 18})
                    .then(function(data){
                        console.log("返回的数据是");
                        // 返回的数据需要用`响应对象.data`才能获取到
                        console.log(data);
                        console.log("返回的数据接受完毕.");
                    })
                    .catch(function(){
                        console.log("请求失败了或者报错了.")
                    });
            });
        });

逆向示例