前端面试--- 诗云科技

第一次参加面试，要记录一下，顺便复盘下今天的过程    ^-^，嘿嘿!!

• 首先是自我介绍，这个没有啥可以多说的；
• 看到简历上写了 axios，就问 axios 的二次封装；这个没有回答出来，感觉不是很熟，有点小拉跨；

 下面就是佳怡弄得 axios 的一个封装：

// 封装 axios
// 实例化  请求拦截器、响应拦截器
import axios from 'axios'
import {getToken} from './token'
import {history} from './history'

const http = axios.create({
    baseeURL: 'http://geek.itheima.net/v1 0',
    timeout: 5000    服务器响应时间
})
................................................................................

// 设置 post 请求头(佳怡的代码里面没有)
instace.defaults.headers.post['Content-Type']  = 'application/json;charset = utf-8'

................................................................................

// 添加请求拦截器
第一种：
http.interceptors.request.use((config) => {
    const token = getToken();
    if(token) {
        config.headers.Authorization = `Bearer ${ token }`;
    }
    return config
}, (error) => {
    return Promise.reject(error)
})

*********

第二种：  只是在 设置请求头那 有点不一样
http.interceptors.request.use((config) => {
    // 设置请求头
    if(locastorage.getItem('token')) {
        config.headers.common['token'] = localStorage.getItem('token');
    }
    return config
}, (error) => {
    return Promise.reject(error)
})

................................................................................

// 添加响应拦截器
http.interceptors.response.use((response) => {
    // 2开头的状态码都会触发该函数
    return response.data;
}, (error) => {
    console.log(error)
    // 处理 token 失效，过期
    if(error.response.status === 4001) {
        // 跳回 登录页面
        history.push('./login')
    }
    return Promise.reject(error)
})

export { http }

•   问完 axios 后，就接着问   axios   设置的加载过时，怎么判断过时；

        我就说到了 http的请求响应码，哈哈 ，不知道这样回答对不对，不过没回答到正确的状态码，看到面试官一步一步的引导我，我太菜了，现在感觉有点尴尬，哈哈。

        http 状态码：

• 1xx： 表示请求已接受
• 2xx： 成功

        200：（成功）服务器已成功处理了请求；

        201：（已创建）                202：（已接受）服务器已接受请求，但尚未处理；

• 3xx：重定向 --- 要求完成必须进行更进一步的操作
• 4xx：客户端错误

        400: (错误请求)

        401：（未授权），请求要求身份验证；

        403：服务器拒绝请求；

        404： 服务器找不到请求网页；

        408： 请求超时；

• 5xx： 服务器端错误

•  客户端存储

嘿嘿，这个刚好背了，答出来了  ^_^

localStorage、cookie、token, 当然了 session 也是一种存储机制，不过是服务端使用的；

• 因为上面说到了 cookie 就问到，cookie 除了可以设置过期时间，还可以设置些什么？

setMaxAge(),设置cookie有效时间；

setPath(), 设置 cookie 的路径，用来由浏览器来解析所代表服务器的根目录；

 呃， 不知道还有没有，目前没找到了，还有其他的，下次再补！！

•  https的一个过程

    这个也答出来了，刚好今天有背

客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤：

1. 客户端使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。
2. web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），传输给客户端。
3. 客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
4. 客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
5. web 服务器通过自己的私钥解密出会话密钥。
6. web 服务器通过会话密钥加密与客户端之间的通信。

•  浏览器是怎么渲染的

这个没答出来，就说到了会渲染处一个DOM树，然后就扯到vue的底层，但是没背牢，哈哈，没说出来

 

• 首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由
  DOM 元素及属性节点组成的。
• 然后对 CSS 进行解析，生成 CSSOM 规则树。
• 根据 DOM 树和 CSSOM 规则树构建渲染树。
• 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）；
• 布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint
  方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

这样一看，我感觉要是回答出来，就还会有 重绘和节流的问题！ 

ps： 最后，总结下自己的缺点，还是有很多的 ，多背背八股文！！