axios

axios

字节cdn上面也也可找到axios代码: https://cdn.bytedance.com/

由于jquery有严重的地狱回调逻辑. 再加上jquery的性能逐年跟不上市场节奏. 很多前端工程师采用axios来发送ajax. 相比jquery. axios更加灵活. 且容易使用. 更加美丽的是. 这玩意是用promise搞的. 所以更加贴合大前端的项目需求. 来吧. 上手试试吧

<script src="/static/axios.min.js"></script>
<script>
    window.onload = function(){
        axios.post("/movies", {"page": 10086}).then(function(resp){
            console.log(resp.data);
        })
    }
</script>

看到没. 这玩意比jquery简单n多倍. 而且, axios为了更加适应大前端. 它默认发送和接收的数据就是json. 所以, 我们在浏览器抓包时.

直接就是request payload. 这对于前端工程师而言. 爽爆了.

axios拦截器

在前端, 我们能看到有些网站会对每次请求都添加加密信息. 或者每次返回数据的时候, 都有解密逻辑。

axios拦截器可以大大简化前端工程师的工作。

那此时. 你思考. 不可能每次请求都要程序员去手动写加密逻辑. 例如:

window.onload = function(){
    // 加密数据
    axios.post("/movies", {"page": 10086}).then(function(resp){
        明文 = 解密(resp.data);
        console.log(明文);
    })
​
    // 加密数据
    axios.post("/movies", {"page": 10086}).then(function(resp){
        明文 = 解密(resp.data);
        console.log(明文);
    })
}

这样很麻烦. 也很蛋疼. axios想到过类似的问题. 它提供了拦截器. 一次性处理好这种问题

axios.interceptors.request.use(function(config){  // 拦截所有请求
    console.log("我是拦截器. 我可以对数据进行加密");
    console.log(config)
    return config;
}, function(error){
    return Promise.reject(error);
});
​
axios.interceptors.response.use(function(response){  // 拦截所有响应
    console.log("我是响应回来之后拦截器. 我可以对数据进行解密")
    return response.data;  
}, function(error){
    return Promise.reject(error);
});

这样. 对于业务层的代码而言就简单很多了

window.onload = function(){
    // 加密的逻辑拦截器帮我完成了
    axios.post("/movies", {"page": 10086}).then(function(data){
        // 解密的逻辑拦截器帮我完成了
        console.log(data);
    })
    // 加密的逻辑拦截器帮我完成了
    axios.post("/movies", {"page": 10086}).then(function(data){
        // 解密的逻辑拦截器帮我完成了
        console.log(data);
    })
}

 

// 网站需要对数据进行加密之后发送给服务器
// 网站服务器返回的数据需要解密
// 给axios所有的请求添加拦截器
axios.interceptors.request.use(function(config){
    console.log("这里是请求拦截器==========");
    console.log(config);
    // 给所有的请求都添加一个请求头.
    config['headers']['qiao'] = "qiaofu";
    let m = config.method
    if (m === 'post'){
        console.log("请求数据", config.data);
    }

    config.data = {"haha": "fjkldsajklfjsdaklfjadlksjfkasdljfasdlkjfldkasjflksdajfklasdjkf"}
    console.log("这里是请求拦截器==========")
    return config;
}, function(error){
    return Promise.reject(error);
});
// // 给axios所有的响应添加拦截器
axios.interceptors.response.use(function(resp){
    let data = resp.data; // 拿到响应数据
    return {"解密后": "flkdasjlkfjadslkfjdaslkfjadslkfjadslfjdaslkjfdasklfjadlskjfadslkfjadskl"};
}, function(error){
    return Promise.reject(error);
});

axios.post("http://127.0.0.1:5000/haha?name=abc", {"name": "qiaofu"}).then(function(data){
    // 这个data是一个对象
    // resp:
    //      config: 配置信息
    //            headers 请求头
    //      data: 返回的数据
    //      headers: 响应头
    //      request: 请求对象, 就是xhr对象
    //
    // console.log("接受到的参数是: ", resp);
    // var data = resp.data;
    console.log(data);
});

// axios的拦截器的关键词是: interceptors
// 发现, 调用栈中, 有Promise, 并且距离发送请求很近.
// 网站中大多数数据的返回都很相似..
// 盲狙, interceptors

 

下面是axios源码：

 function l(e) {
    this.defaults = e,
    this.interceptors = {
        request: new o,
        response: new o
    }
}
l.prototype.request = function(e) {
    "string" === typeof e ? (e = arguments[1] || {},
    e.url = arguments[0]) : e = e || {},
    e = a(this.defaults, e),
    e.method ? e.method = e.method.toLowerCase() : this.defaults.method ? e.method = this.defaults.method.toLowerCase() : e.method = "get";
    var t = [s, void 0]
      , n = Promise.resolve(e);
    this.interceptors.request.forEach((function(e) {
        t.unshift(e.fulfilled, e.rejected)
    }
    )),
    this.interceptors.response.forEach((function(e) {
        t.push(e.fulfilled, e.rejected)
    }
    ));
    while (t.length)
        n = n.then(t.shift(), t.shift());
    return n
}