浏览器相关

干饭王不止会干饭
161 阅读3分钟

e.target: 点击的那个标签

e.currentTarget：冒泡到的那一层

冒泡和捕获同时存在： 先捕获，在冒泡 类似一个洋葱

老的浏览器是根据顺序

伪阻止冒泡if(e.target === e.currentTarget)

get post 区别：

get参数放地址栏 ；post 请求放body

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。 （大多数）浏览器通常都会限制url长度在2K个字节，而（大多数）服务器最多处理64K大小的url。超过的部分，恕不处理。如果你用GET服务，在request body偷偷藏了数据，不同服务器的处理方式也是不同的，有些服务器会帮你卸货，读出数据，有些服务器直接忽略，所以，虽然GET可以带request body，也不能保证一定能被接收到哦。

  • GET在浏览器回退时是无害的，而POST会再次提交请求。

  • GET产生的URL地址可以被Bookmark，而POST不可以。  

  • GET请求会被浏览器主动cache，而POST不会，除非手动设置。  

  • GET请求只能进行url编码，而POST支持多种编码方式。

  • GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。  

  • GET请求在URL中传送的参数是有长度限制的，而POST么有。  

  • 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。  

  • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。  

  • GET参数通过URL传递，POST放在Request body中。

  • 3.post 有预检请求;哪些有预检请求？

如何保证异步按顺序执行？ async/await promise.then

如何停止？ abort方法； 多种方法

fetch特点

  1. fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
  2. fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
  3. fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
  4. fetch没有办法原生监测请求的进度，而XHR可以

axios的特点：

1.支持浏览器和node.js(在浏览器中发送 XMLHttpRequests 请求;在 node.js 中发送 http请求)

2.支持promise

3.能拦截请求和响应 interceptors.response.use interceptors.request.use

5.能取消请求（cancelToken）

6.自动转换json数据(axios通过设置transformResponse，可自动转换请求返回的json数据)

transformResponse: [function transformResponse(data) {
    /*eslint no-param-reassign:0*/
    if (typeof data === 'string') {
        try {
        data = JSON.parse(data);
        } catch (e) { /* Ignore */ }
    }
    return data;
}],

转换请求返回数据， 在axios/lib/core/dispatchRequest.js文件中暴露的核心方法dispatchRequest中，有这样两段：

// 转换请求的数据  
config.data = transformData(
config.data,
config.headers,
config.transformRequest
);



// 转换返回的数据 
response.data = transformData(
  response.data,
  response.headers,
  config.transformResponse
);

7.浏览器端支持防止CSRF(跨站请求伪造)

ajax缺点:

1、针对MVC的编程，不符合前端MVVM的浪潮

2、基于原生XHR开发，而XHR本身的架构不清晰 （我觉得此处应该是说官方给出的文档架构不清晰。）

3、JQuery整个项目太大，单纯使用Ajax 却要引入整个JQuery，非常的不合理（采取个性化打包的方案又不能享受CDN服务）

4、不符合关注分离（Separation of Concerns）的原则

5、配置和调用方法非常的混乱，而且基于事件的异步模型不友好。（配置和调用方法非常的混乱：想做封装处理的时候，配置不好处理，需要做判断，如果方法不公用 就每次调用都得ajax一次，代码冗余。 ）

avatar
文章
阅读
粉丝