最近我的朋友王小闰参加了一场面试,在他填写简历表的时候,排在他前面的应聘者正在旁边邻桌接受来自面试官的检验。

王小闰边写边想,这不就是一会儿要面试自己的前端leader么,现在面试官提问的一些面试题会不会就是待会儿要问自己的问题? 想到这,我朋友王小闰不自觉地竖起了耳朵听,借鉴下别人回答问题的经验,保不齐自己一会儿要套用一下。

不听不知道,一听吓一跳。没准备好的面试,那叫一个尬聊。

首先,面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致。另一方面就是看看你简历上做过什么项目,用到了哪些技术栈,一会儿好提问你。

其实,最重要的是为了缓解两人的紧张,以打开局面。当然,如果坐在对面的面试官是第一次面试别人,也免不了会紧张。

那哥们自我介绍完毕之后,面试官问了几个问题,都比较有针对性,听得出来这家公司对数据交互绑定这一块还是比较重视的。

比如面试官上来就问,你在之前公司项目里用过ajax吗?

只听那哥们很自信地说,用过的,上家公司做的是前后端分离的vue项目,经常使用ajax获取后台数据,然后渲染到页面上。

面试官追问:那ajax默认是同步还是异步?

问到这个问题的时候,前面那个哥们却一直在扯ajax的 get 和 post 方法,听的王小闰后背直冒冷汗,这么尬聊好么?知之为知之,不知为不知啊,哥们~

面试之前千万要准备好,不然会闹笑话的。

话说回来,这个问题你想到应该怎么回答才能令面试官满意了吗?

一般前端老司机都是这么回答的:AJAX中根据async的值不同分为同步(async = false)和异步(async = true)两种执行方式;在W3C的教程中推荐使用异步执行。

默认情况下async是true,也就是异步。

其实面试官看得出来他答非所问,但是并没有揭穿他,而是继续提问下一个问题。

面试官接着问:Ajax中什么时候用同步,什么时候用异步?

想要回答这个问题,首先要缕清思路,先要了解什么是同步请求,什么是异步请求,然后才是使用场景的分析。

先来听听职场老司机是如何回答的吧~

一.什么是同步请求:(false)

同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,前一个人办理完自己的事务,下一个人才能接着办。也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态(即当ajax返回数据后,才执行后面的function)。

二.什么是异步请求:(true)

异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。

一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。

下面来区别一下同步和异步有什么不同:

异步:在异步模式下,当我们使用AJAX发送完请求后,可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求,但是因为我们采用了异步执行方式,所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的,那么,这个时候就好比两条线程同时执行一样。

同步:在同步模式下,当我们使用AJAX发送完请求后,后续还有代码需要执行,我们同样将服务器响应交由另一个JS函数去处理,但是这时的代码执行情况是:在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时,包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样,请求发出后就进入阻塞状态,直到解除阻塞,余下的代码才会继续执行。

有人说:既然异步这么好,那全部都用异步好了,同步存在还有什么意义?

那么,同步适用于一些什么情况呢?

我们可以想一下,同步是一步一步来操作,等待请求返回的数据,再执行下一步,那么一定会有一些情况,只有这一步执行完,拿到数据,通过获取到这一步的数据来执行下一步的操作。这是异步没有办法实现的,因此同步的存在一定有他存在的道理。

正如这世界上大部分事物发展的规则一样,存在即合理。

如何选择同步还是异步模式?要回答这一问题,我们可以通过下面可能出现的问题来回答:

我们在发送AJAX请求后,还需要继续处理服务器的响应结果,如果这时我们使用异步请求模式同时未将结果的处理交由另一个JS函数进行处理。这时就有可能发生这种情况:异步请求的响应还没有到达,函数已经执行完了return语句了,这时将导致return的结果为空字符串。

如此回答,才能体现出你思维逻辑缜密,以面试官抛出来的问题作为引子,以点带面深入阐述一下,既回答了面试官的问题,又展示了你思考问题的深度。

这也算是一个面试技巧,不单单要回答问题,还要说出你对这个概念的全方位的理解,如此才能在面试中加分。

很显然,这个问题那哥们也是强行尬聊,回答的模棱两可,没有说到点儿上。

为了不冷场,面试官继续拷问:如何设置ajax为同步?

此时那哥们心理活动肯定在想,mmp,看来这次面试要栽倒在ajax上面了。这个问题思索了半天,知道躲不过了,然后前面那哥们直接委婉地说,我之前在公司项目里使用到ajax的地方比较少,没有做太多深入的了解。

其实这个问题很简单,只要把async字段的value值更改成false就OK了。下面的代码片段形象又生动地阐述了ajax同步的机制。

console.log(1);

$.ajax({

    url: '',

    async: false,

    success: function() {

        console.log(2);

    }

});

console.log(3);

面试讲到这儿,你需要记住的几点:

1.Jquery中的ajax在默认不写async情况下,请求为异步请求;即:async:true;

2.如果项目中在做一项操作之前要进行ajax的验证,无论同步或者异步,都必须在验证通过后,方才进行其他操作。

3.熟练应用error参数,关注返回来的异常信息,从而判定程序的错误位置;

4.项目前端做验证,后端也做相应的验证;前端做验证是为了减少服务器压力和增加用户体验,后端做验证才是为了安全。

还有,我想对前面面试的那哥们说点我的想法,如果哪个面试题不会,或者不清楚,就直接告诉面试官,不好意思这个我不太清楚,然后虚心求教,这样起码能落个真诚、好学的好印象。如果你胡编乱造,只会降低你在面试官心中的形象,这样是会减分的。

所以,你对ajax真的了解吗?

面试快结束的时候,面试官还问了一些关于vue的问题,这哥们回答的还行。

最后,面试官问那个应聘者哥们,你有什么想问我的吗?

那哥们吞吞吐吐地说,其实也没什么想问的,只要贵公司能给我发offer,我来了咱公司一定卷起袖子好好干,干出自己的风采,体现出自己的价值!!!反正他说了一大堆诚恳的话。

其实后来这家公司没有录用他,原因不详。

面试官提的某些问题,我朋友王小闰也不是很了解。于是他赶紧拿出手机准备百度一下,手机一掏出来,面试官回头说:简历表填好了吧,轮到你了。

此时,王小闰只想摊手说一句:好尴尬~

不过还好我比较真诚,有一说一,有二说二,从不尬聊。

面试写到这儿,也该做个总结了。

首先,面试之前,一定要做好准备。就算没准备好也没关系,当着面试官的面一定要实话实说,如果你不知道的东西千万别瞎说,别跟面试官尬聊或者是较真,面试官之所以能坐在那个位置由他来面试别人,肯定也是身经百战,见过很多场面的人物,能看出来你是否在乱讲,从你一张嘴就基本能判断出你对某个技术点是否熟悉,或者是熟练到了哪种层次,浮于表面的理解还是深入原理的探索。

当然,也不要因为这次面试没准备好,白白浪费了一次工作机会而气馁,换个角度想想,多面试几家多踩几个坑,对你之后的面试是有好处的。吃一堑长一智,面试结束后,回去把不懂的不会的问题,都在网上查查,了解清楚,深入研究下它的原理。等到下一次面试,如果问同样的或者类似的问题,你就胸有成竹了。

番外:这轮面试的结果是,经过激烈的岗位竞争,王小闰被那家公司给录取了,感谢前面那个哥们为自己踩的坑。同行也是竞争对手,王小闰不是赢了竞争对手,而是赢了昨天还不够努力的自己。

柳传志曾经说过,小公司里做事,大公司里做人。

最后祝大家都能找到适合自己的好工作!


更多文章我会第一时间更新在公众号<闰土大叔>里面,欢迎关注~

vue菜鸟从业记:没准备好的面试,那叫尬聊的更多相关文章

  1. vue菜鸟从业记:公司项目里如何进行前后端接口联调

    最近我的朋友王小闰进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是王小闰非常熟悉的vue全家桶,后端用的是Java语言. 在前后端开发人员碰面之后,协商确定好了前端需要的数据接口(扯那么 ...

  2. vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线

    最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说“我也不知道我的接口文档写的对不对,我们验证一下吧?我也不知道我的数 ...

  3. 记一次HashMap面试

    记一次HashMap面试 从网上已经身边同事朋友的面试情况来看,面试HashMap几乎是必问的,网上也很多类似的文章,但是真面起来,发现还是有很多点可以深抠的.本篇就结合一次面试经历说一下之前没有注意 ...

  4. 在各方面还没准备好的时候,大家一定要慎用border-box样式!!!!

    这几天,我被一个js问题困扰到癫狂了! 事情是这样的,我之前写了个功能非常复杂的纯jquery代码的前端gridview控件,实现了大量的功能和效果,在一些项目里也用得很好. 最近有个项目,样式做了调 ...

  5. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

  6. 【转】Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理 ...

  7. Vue 脱坑记

    问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ ...

  8. 对于大学4年的反思(续),记我的ThoughtWorks面试

    之前我写了一篇对于大学四年的反思,时隔一个月,为什么我这么快就要来写这篇续章呢?主要有两个原因,第一是感谢静子姐姐,记得知乎上有个回答里面说过人生需要有贵人的帮助,遇到贵人是一件很幸运的事情.我想,静 ...

  9. Java Web架构知识整理——记一次阿里面试经历

    惭愧,从一次电面说起.我个人在某国企做一名软件设计师,国企大家都懂的,待遇一般而且没啥意思,做的方向基本都是操作系统.驱动和工具软件的开发,语言基本都是C/C++.最近也想跳槽,刚好有幸得到了一次阿里 ...

随机推荐

  1. django - 总结 - 中间件

    中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响到性能. MID ...

  2. react实战项目开发(2) react几个重要概念以及JSX语法

    前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...

  3. react中键盘enter事件处理

    对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...

  4. AC自动机算法详解 (转载)

    首先简要介绍一下AC自动机:Aho-Corasick automation,该算法在1975年产生于贝尔实验室,是著名的多模匹配算法之一.一个常见的例子就是给出n个单词,再给出一段包含m个字符的文章, ...

  5. 不二之选_iTOP-4418开发板研发之旅_缩短开发时间

    迅为iTOP-4418开发板拿到手?用能力印证梦想,培养你的研发路程,能力·思维 一.板载WIFI蓝牙.4G.GPS.千兆以太网接口.串口.重力加速度计等. 二.自选模块支持500W摄像头自动对焦摄像 ...

  6. 【easy】263. Ugly Number 判断丑数

    class Solution { public: bool isUgly(int num) { ) return false; ) return true; && num % == ) ...

  7. oracle 11.2.0.4 rac 修改 ip vip scan ip

    修改前host文件 198.27.73.21 ht-d01 198.27.73.22 ht-d02 198.27.73.25 ht-d01-vip 198.27.73.26 ht-d02-vip 19 ...

  8. C# 在webapi项目中配置Swagger

    这篇文章已经过时了,新的主要配置一个就行了,请参照:http://www.cnblogs.com/alunchen/p/7397396.html Swagger是非常流行用于编辑api给前端同事用.或 ...

  9. Python-Django-常用字段和参数

    -1 表模型如果不写主键,orm会自动创建一个主键 -2 常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名 ...

  10. Vue项目中使用webpack配置了别名,引入的时候报错

    chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/as ...