面试总结-axios与ajax区别

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。

HTTPS和HTTP的区别主要为以下四点：
① https协议需要到CA申请证书，一般免费证书很少，需要交费。
② http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
③ http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④ http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

ajax与axios的区别：
ajax：核心使用XMLHttpRequest,对个请求之间如果有先后关系的话，就会出现回调地狱。
Jquery ajax是对原生XHR的封装，并添加了JSONP的支持。
缺点：
1.针对MVC的编程，不符合现在前端MVVM的思想
2.基于原生XHR开发，XHR本身架构无异步化
3.JQUERY项目太大，ajax需要依赖jquery
4.不符合关注点分离（Separation Of Concerns）原则
关注点分离：将复杂问题做合理的分解，在分别仔细研究问题的不同侧面（关注点）。最后综合各方面的结果，合成整体的解决方案，
5.配置和调用方式非常混乱，而且基于时间的异步模型不友好

MVVM，Model-View-ViewModel。 核心是ViewModel，他就像一个中转站，负载转换Model中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，
向下与Model层通过接口请求进行数据交互，起呈上启下作用。View层展示的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与MOdel层交互。这就完全解耦了View层和Model层。

axios
axios时一个基于Promise版本的XHR封装。
特征：
1.支持Promise API
2.客户端支持防止CSRF/XSRF
3.提供了一些并发请求的接口 axios.all([axios.get('/qq'),axios.get('/aa')])
4.拦截请求和响应，可转换请求和响应数据（统一处理，增加请求头，cookie内容。转换响应为JSON）

//添加请求拦截器
axios.interceptors.request.use（function（config）{
     //在发送请求之前做某事
     return config;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;
 
//添加响应拦截器
axios.interceptors.response.use（function（response）{
     //对响应数据做些事
     return response;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;
  删除
  var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
5.支持取消请求
6.体积小
7.从浏览器中创建XMLHttpRequest

缺点
1.不支持JSONP，需要自己封装
//axios本版本不支持jsonp 自己拓展一个
axios.jsonp = (url) => {
    if (!url) {
        console.error('Axios.JSONP 至少需要一个url参数!')
        return;
    }
    return new Promise((resolve, reject) => {
        window.jsonCallBack = (result) => {
            resolve(result)
        }
        var JSONP = document.createElement("script");
        JSONP.type = "text/javascript";
        JSONP.src = `${url}&callback=jsonCallBack`;
        document.getElementsByTagName("head")[0].appendChild(JSONP);
        setTimeout(() => {
            document.getElementsByTagName("head")[0].removeChild(JSONP)
        }, 500)
    })
}

CSRF： 拦截请求，在每个请求中都添加一个token（从登陆请求获取到）