美文网首页
前端面试题

前端面试题

作者: cherubic_c | 来源:发表于2020-04-26 15:15 被阅读0次
    HTTP协议

    (1).常见的请求方法

    HTTP 1.0

    • 1.GET:从指定的资源请求数据
    • 2.POST:向指定的资源提交要被处理的数据,例如
      • 1.提交表单
      • 2.将消息发布到公告板,新闻组,邮件列表,博客或类似的文章组;
    • 3.HEAD
      • 1.类似于get请求,只不过返回的响应中没有具体的内容,只有头部
      • 2.只请求资源的首部
      • 3.检查超链接的有效性
      • 4.检查网页是否被修改

    HTTP1.1

    • 1.PUT:替换或创建指定资源
    • 2.DELETE:对指定资源进行删除

    HTTP2.0

    • 1.OPTIONS: 用于获取目的资源所支持的通信选项,比如说服务器支持的请求方式等等。

    • 2.TRACE:实现沿通向目标资源的路径的消息环回(loop-back)测试 ,提供了一种实用的 debug 机制。

    • 3.CONNECT

      • 1.为代理服务器准备的

      • 2.在 HTTP 协议中,CONNECT 方法可以开启一个客户端与所请求资源之间的双向沟通的通道。它可以用来创建隧道(tunnel)。例如,CONNECT 可以用来访问采用了 SSL (HTTPS) 协议的站点。客户端要求代理服务器将 TCP 连接作为通往目的主机隧道。之后该服务器会代替客户端与目的主机建立连接。连接建立好之后,代理服务器会面向客户端发送或接收 TCP 消息流。

    所有通用服务器必须支持GET和HEAD方法。所有其他方法都是可选的。

    • 1.安全性:在此规范定义的请求方法中,GET,HEAD,OPTIONS和TRACE方法被定义为安全的
    • 2.幂等性:PUT,DELETE和安全Method是幂等的。
    • 3.可缓存性:GET, HEAD, and POST。但大多数是只实现GET和HEAD可缓存
      • 1.表示浏览器是会自动缓存的,以应用于后续请求。除非response中有相关策略

    (2).GET 和 POST 的区别

    • 1.get参数通过url传递,post放在request body中。

    • 2.get请求在url中传递的参数是有长度限制的,而post没有。

    • 3.get比post更不安全,因为参数直接暴露在url中,所以不能用来传递敏感信息。

    • 4.get请求只能进行url编码,而post支持多种编码方式

    • 5.get请求会浏览器主动cache,而post支持多种编码方式。

    • 6.get请求参数会被完整保留在浏览历史记录里,而post中的参数不会被保留。

    • 7.GET和POST本质上就是TCP链接,并无差别。但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中体现出一些不同。

    (3).HTTP 状态码

    • 1xx (Informational): 收到请求,正在处理
    • 2xx (Successful): 该请求已成功收到,理解并接受
    • 3xx (Redirection): 重定向
    • 4xx (Client Error): 该请求包含错误的语法或不能为完成
    • 5xx (Server Error): 服务器错误

    (4).301 和 302 有什么具体区别

    • 301:永久移动,请求的网页已永久移动到新的位置,服务器返回此响应,会自动将请求者转到新位置

    • 302:历史移动,服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来继续以后的请求。

    MVVM和MVC
    • MVC: MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。ControllerModelView的协调者,ViewModel不直接联系。基本都是单向联系。

    1.View传送指令到Controller。

    2.Controller完成业务逻辑后改变Model状态。

    3.Model将新的数据发送至View,用户得到反馈。

    • MVVM: MVVM是把MVC中的Controller改变成了ViewModel

      View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示,通过数据来显示视图层。

    2.MVVM模式的优点以及与MVC模式的区别

    • MVVM模式的优点:

      • 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
      • 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
      • 独立开发: 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。
    • MVVM和MVC的区别:

      • MVC中Controller演变成MVVM中的ViewModel
      • MVVM通过数据来显示视图层而不是节点操作
      • MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验
    ajax

    (1).实现一个Ajax

    
    var xhr = new XMLHttpRequest()
    // 必须在调用 open()之前指定 onreadystatechange 事件处理程序才能确保跨浏览器兼容性
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status ==== 304) {
          console.log(xhr.responseText)
        } else {
          console.log('Error:' + xhr.status)
        }
      }
    }
    // 第三个参数表示异步发送请求
    xhr.open('get', '/api/getSth',  true)
    // 参数为作为请求主体发送的数据
    xhr.send(null)
    

    (2).Ajax状态

    0--未初始化。尚未调用 open()方法。
    1--启动。已经调用 open()方法,但尚未调用 send()方法。
    2--发送。已经调用 send()方法,但尚未接收到响应。
    3--接收。已经接收到部分响应数据。
    4--完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

    (3).将原生的 ajax 封装成 promise

    const ajax = (url, method, async, data) => {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
          // 已经接收到全部响应数据,而且已经可以在客户端使用了
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText))
            } else if (xhr.status > 400) {
              reject('发生错误')
            }
          }
        }
        xhr.open(url, method, async)
        xhr.send(data || null)
      })
    }
    

    有补充或者有更通俗易懂的小伙伴可以私信或者加QQ群:163958730(已满) 145454260 一起讨论~

    相关文章

      网友评论

          本文标题:前端面试题

          本文链接:https://www.haomeiwen.com/subject/sqzdwhtx.html