去哪儿-实习面试

今天下午面的试，感觉这次挺难的，除了自我介绍，半个小时都在问技术，写这个复习一下吧。 ?

---

请求头，请求体

请求头属性

1. Accept：
   请求报文可通过一个Accept报文头属性告诉服务端，客户端接受什么类型的响应。
2. Cookie：
   客户端cookie通过这个b报文头属性传给服务器，其中包含jsessionid是判断处于同一session中的重要条件（当然也可以通过重写URL的方式将会话ID附带在每个URL的后面）
3. Referer：
   表示这个请求是从哪个URL过来的，很多网页监控软件帮你监控流量，全国访问客户的分布情况，其原理就是通过这个Referer及其它一些HTTP报文头工作的。
4. Cache-Control：
   对缓存进行控制，如一个请求希望响应返回的内容在客户端要被缓存一年，或不希望被缓存就可以通过这个报文头达到目的。
5. Accept-Language
6. Content-Length

fetch相比ajax优势
XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好，Fetch 的出现就是为了解决 XHR 的问题，拿例子说明：

使用 XHR 发送一个 JSON 请求一般是这样：

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

使用 Fetch 后，顿时看起来好一点

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

使用 ES6 的 箭头函数 后：

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

Fetch 优点主要有：

1. 语法简洁，更加语义化
2. 基于标准 Promise 实现，支持 async/await
3. 同构方便，使用 isomorphic-fetch

Fetch 常见坑：

1. Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: ‘include’})
2. 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

左右定宽，中间自适应布局

1. float + margin
2. table-cell:

.main {display: table;min-width: 320px;width: 100%; }
.left{width: 200px;display: table-cell;background-color:#00acac; }

<div class="main">
  <div class="left">然后...</div>
  <div>
    <span>有一天他们相遇了，然后。。。</span>
  </div>
  <div class="left">有一天....</div>
</div>